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