Angular Directive Selectors Can Do More Than You Think!
If you have ever created an Angular directive before, you probably used the brackets ([])
notation as a selector.
Most of the time it’s the preferred way, but it’s not a requirement. Actually, you can get pretty creative with the selectors used in your directives.
To emphasize this, we’ll create an anchor directive that targets every external link in our template. We’ll see how we can:
- Target native HTML elements
- Exclude elements by use the
:not
pseudo-class.
NgForm Case Study
To see an example of a complex selector, lets first have a look at the NgForm
directive.
Few things are worth a comment:
- You can target more than one selector by separate each selector with a comma
- You can mix targeting HTML elements (like
<form>
) with HTML attributes (likengForm
) - You can use the
:not
pseudo-class to exclude some elements
Create the External Link Directive
We define the external link as any anchor tag that doesn’t already have the routerLink
directive.
Going by the NgForm
example, we can define the selector as:
The beautiful thing about this selector is that we don’t have to create the attribute name for something that is better described as being the opposite of something else.
We could’ve named it externalLink
, but that’s just duplicating effort. It’s also pretty easy to forget to put the directive on some external links. The advantage here is that we target them all in one go.
The directive should do the following:
- Open the link in a separate window
- Add the
rel
attribute to improve performance and prevent security vulnerabilities
We can achieve both with the use of @HostBinding()
.
Notice how we also decorate the properties with the @Input()
decorator to allow for potential overrides.
Another possible implementation of this behavior would be with the @Attribute()
decorator. It would bring a slight performance boost, as unlike the @Input()
decorator, it is evaluated only once. That means that subsequent change detection runs wouldn’t check the rel
and target
properties.
To learn more about this technique, check out this awesome article.
Testing the Directive
Let’s create simple navigation that points to some external URLs:
If you open up the Chrome Dev Tools you will see the following:
Victorious! The directive works with no extra attribute selectors needed.
Summary
In this article, we have learned that you don’t have to use the attribute selector when working with Angular directives. We’ve examined the ngForm
directive, and used it as an example to implement our own custom external link directive.
If you like the content, please clap 👏👏👏 It would make my day.