Creating Custom Directives in Angular

Today we will learn how to create our own directives in Angular. In my previous posts I discussed all the built-in directives which Angular provided. If you are unaware, I would highly suggest you to start from the part_1 ( of the 6 series post).

So the first question that can strike you is why we need a custom directive when Angular already provided us with 6 amazing directives. The simple reason is there can be multiple scenarios where the exact requirements are not met using the built-in directives. In those cases we need to write our own logic to meet the requirement and custom directives comes to the rescue.

Now, lets see how we can create our own custom directive.
The CLI command to create a new directive is -
ng generate directive <directive-name>
There is also a shorter way for the above command -
ng g d <directive-name>

Lets create a simple directive which when applied to an element will add an underline to the text. Will name the directive as
my-underline
Lets open the command prompt from the project directory and type in the below command -
eg. ng g d my-underline
Once you run the above command the CLI should create 2 files
The directive file
The spec file of the directive ( for writing unit test)
and update the module file (in the declaration array, just like component creation we saw earlier).

In the project folder you should see something like below -

We will work with the file pointed with yellow arrow
my-underline.directive.ts.
Once you open the file you will see the below code -

import { Directive } from '@angular/core';

@Directive({
  selector: '[appMyUnderline]'
})
export class MyUnderlineDirective {

  constructor() { }

}

Here we come across a new decorator @Directive. The directive's selector is appMyUnderline. In order to use the directive we need to use the selector name.

Lets paste in the below code in the constructor -

  constructor(private el: ElementRef, private renderer: Renderer2) {
    this.renderer.setStyle(this.el.nativeElement, 
     'textDecoration', 'underline');
  }

Since we are just scratching the surface of how to create a custom directive I am not diving deep in explaining what is ElementRef or Renderer2 (which I will discuss in the advanced concept section).

Now we need to use the directive as well. So lets open app.component.html file and paste in the below code -

<div appMyUnderline>This text will be underlined!</div>

We just need to add the directive name in the element and it will work like magic.

Now, lets start the application and open localhost:4200 in the browser. You should see the below output -

Here you can see the text has been underlined. You can reuse this feature as many times as you want.

This is a simple example I showed but you can do many complex stuffs pretty easily using your own directive.

Note
A directive does not have a template/ html file associated with it.
So we can say Component is a directive with a template.
We can use the directive selector as an attribute (shown in the example), or as a class, or as an id. If you are not familiar with the selector types I would recommend you to go through this post

So we learnt how to create a custom directive and how to use it.

Hope you enjoyed the post. If yes do like and comment.

Cheers!!!
Happy Coding