Directives in Angular2

Directives in Angular2


At this point every self-respecting outstaffing developer knows Angular2. A framework for web development that is beginning to gain a lot of strength and increasingly 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 hear repeatedly in the world of technology.

But let’s not get lost, let’s go straight to the main theme 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 outstanding features 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 but if you are developing in angular2 I can assure you with a 0,01% margin of error that you’re using directives do we check?

If you have used * ngIf, * ngFor, * ngSwitch, etc, my friend, you’re 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 on many occasions when it comes to developing.

Well, today we will 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 to work, how I create a directive, because thanks to angular-cli, our great friend, it is as simple as this.

ng generate directive $our_name

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

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

It’s not too complicated, is it? We see that there is a decorator @Directive with a property “selector” where we’ll put the name of our board. The name we put in this property will be the same name as the html attribute. We will look at it in more detail shortly, but first, let us complete this directive!

We will add the basics to work with, the html element with which you will use and a couple of events, how much between the mouse and when it exits.

Here we have introduced two concepts, the @ HostListener and the ElementRefbut don’t be scared, they’re actually pretty 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, which we will see in a few moments: D

@ HostListener: Gives us the ability to listen for events of the element containing the directive. In this case ‘mouseenter ‘and’mouseleave’. Just below the function that will be executed when it occurs. 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 is time to give a utility to our first directive! 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 over it will change the background to red and when it is not green

What needs to be done to achieve this? There should be a code like this.

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

You don’t need to import anything into the component, you just have to be importing into 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 hard at all, was it? But you’ll agree with me that the way it is doesn’t do much good for us. What if we pass 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!

Good! 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 policy selector, otherwise it will not work) The parameter we receive has been used to assign the background color. This has the following result:

Looks like this has another color, doesn’t it? As we see it has not been difficult to implement and we gain 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!

Ready to see us in action:

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

Contact us: