Directives in Angular2

Directives in Angular2

By now every self-respecting developer knows Angular2. A framework for web development that is starting to gain a lot of strength and each time with higher goals, we are talking about the famous hybrid applications, which are increasingly gaining more presence in current developments, and a little further, the PWA or progressive web apps, which surely in a short time we will hear repeatedly in the world of technology.

But let’s not get lost, let’s get straight to the main topic of this post. Directives, let’s see what they are, how they are made and most interestingly, why they are so useful! In my opinion the directives are one of the features to highlight of angular2.

What is a directive?

A directive is represented as an attribute in an HTML tag, this attribute is giving the DOM element that contains it a behavior, that behavior is defined by us and can be used in all the elements we want.

I’m going to give you an example, you may not know it but if you are developing in angular2 I can assure you with a 0,01% of margin of error you’re using, shall we check?

If you have used *ngIf, *ngFor, *ngSwitch, etc, my friend, you are using directives. Yes, those are directives, which come in the core of angular2, and I think you will agree with me that they make life easier for us on many occasions when it comes to developing.

Well, today we are going to see how we can create our own directive and use it in our project!

How do I create a directive?

The time has come to get down to work, how I create a directive, because thanks to angular-cli, our great friend, it’s as simple as this.

ng generate directive $name_of_our_directiva

How simple isn’t it? Thanks angular-cli! But let’s not sing victory ahead of time, we still have a way to go. Let’s see what happened with the previous command…

This has created the following file $name_of_our_directory.directive.ts and has modified the app.module.ts adding our new directive to the module (it also creates us a.spec.ts to do the testing, but today is not the topic that brings us here) let’s see what structure a directive has!

It’s not very complicated, is it? We see that there is a decorator @Directive with a property “selector” where we will put the name of our directive. The name that we put in this property will be the same name that the html attribute will have. In brief we will see it in more detail, but first, let’s complete this directive!

Let’s add to it the basics for working, the html element with which it will be used and a couple of events, how much between the mouse and when it exits.

Here we have introduced two concepts, the @HostListener and the ElementRef, but let them not scare you, they are in fact quite simple to understand.

ElementRef: There is no complication here, this is a reference to the html element that contains the directive. You just have to know how to access it, which we will see in a few moments 😀

@HostListener: Gives us the ability to listen for events of the element that contains the directive. In this case ‘mouseenter’ and ‘mouseleave’. Just below the function that will be executed when it happens. How do you see it?

By the way! Don’t forget to import HostListener and ElementRef

Very interesting, but this… How do I use it?

Of course! Now it’s time to give our first directive a utility! Now we are ready for it.

I propose that the first version of our directive be used to change the background-color of the html element that contains it. When the mouse is on it will change the background to Red and when not it will leave it in green

What needs to be done to get it? There should be a code similar to this.

Now it’s the turn of the file.html, we use the directive as follows.

There is no need to import anything in the component, it just has to be importing in the module (In our case app.module.ts) and is already accessible in all components of our module

And the result will be very similar to this:

It wasn’t difficult at all, was it? But you will agree with me that as it is, it is not worth much to us. What if we passed a parameter to the directive to tell it the background color we want. This would be much better, wouldn’t it? Let’s see how!

Well! What have we done? Very easy! We have used @Input to receive the parameter (IMPORTANT the variable that assigns @Input has the same name as the directive selector, otherwise it won’t work) We have used the parameter we received to assign the background color to it. This has the following result:

It seems that this already has another color no? As we see it has not been difficult to implement and we won that we have only had to program the behavior once and now it is usable throughout the application!


I am sure that this can give you great ideas when developing a project, it is one more step to make the code work with us and not against us. So far today’s post about directives in angular2, I hope you liked it!

Dedicated Software Team | Unity3d APP Development

Ready to see us in action:

More To Explore
Enable registration in settings - general
Have any project in mind?

Contact us: