To create custom directives we need to learn only three steps, they are:

Step 1 - Create a Directive



Let's understand how to create a new custom directive. We do create a directive which simply highlights an element whenever the mouse hovers over it.



For this, we create a new folder called “directives”. In this folder, we create a file called “element-highlight.directive.ts” file. Inside the file, write the below code,

import { element } from 'protractor' ; import { Directive, OnInit, ElementRef } from "@angular/core" ; @Directive({ selector: '[elementHighlight]' }) export class ElementHighlightDirective implements OnInit{ constructor( private eleRef:ElementRef){} ngOnInit(){ this .eleRef.nativeElement.style.backgroundColor= 'red' ; this .eleRef.nativeElement.style.color= 'white' ; } } In the above code, @Directive is a decorator function which is imported from ‘@angular/core’ library. Inside the directive, we have used ‘selector’ property just like as we used in component, now set the value of selector with string enclosed in square bracket []. Basically, this value is our directive name, that we will use in our template. After that we create an object (eleRef) of type ElementRef, to access those elements on which we want to apply this directive (i.e. DOM element). Now, inside the ngOnInit(), we change the style of that element. Step 2 - Register Directive Now, it’s time to register and use the directive. As per step 2, we need to register our directive before use. For this, go to “app.module.ts” file. In this file, first of all, import your directive like

import { ElementHighlightDirective } from './directives/element-highlight.directive' ; After that inside the @NgModule, go to the declaration part and write the class name, like this:

declarations: [ AppComponent, ElementHighlightDirective ],

Step 3 - Use it in View

Now, as per our third step, we are going to use this directive in our template. So, for this open your "app.component.html" file and put in the below code:

<div style= "text-align:center" > <h1> Custom Directive </h1> </div> <div class = "row" > <p elementHighlight>Mahesh Verma</p> </div> Now, save and run the project and see the output.



After seeing the above output, we can say that our directive is working.



Use of @HostListner in Directives After seeing the above output, we can say that our directive is working.

Now, we have learned about a basic and simple directive. It’s time to handle some DOM events where directives can be implemented. For this, we require something which can handle these DOM events. Angular provides @HostListner decorator function for that. If we want to handle DOM events like focus, blur, mouseover, mouseleave, mouseenter etc, then we need to listen to them and for listening we use @HostListner. This decorator allows us to subscribe to the raised events from the DOM elements. Let’s understand it with an example.



Suppose, in the directive we want that whenever we hover the mouse over the div then its color changes into red, and when the mouse leaves it again it looks simple, then we use two events (mouseenter and mouseleave) with the help of @HostListner. Change the code into “element-highlight.directive.ts” file as per the below code, export class ElementHighlightDirective implements OnInit{ constructor( private eleRef:ElementRef){} ngOnInit(){ } @HostListener( 'mouseover' ) mouseover(eventData:Event){ this .eleRef.nativeElement.style.backgroundColor= "Red" ; this .eleRef.nativeElement.style.color= "White" ; } @HostListener( 'mouseleave' ) mouseleave(eventData:Event){ this .eleRef.nativeElement.style.backgroundColor= "transparent" ; this .eleRef.nativeElement.style.color= "Black" ; } } With the help of @HostListner, Angular listened to these two events ‘mouseover’ and ‘mouseleave’, where the directive had been implemented. See the output, there is no need to change into app.component.html file. Use of @HostBinding in Directives