Creating Custom Directives in Angular
Tags: angular, beginners, tutorial, directive
Published: 2021-12-31 19:31:53

**T**oday 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](https://dev.to/anubhab5/understanding-built-in-angular-directives-part-1-oln) ( 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](https://dev.to/anubhab5/creating-angular-component-129e)).
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1igsoi4c34th8ha3cie0.PNG)
In the project folder you should see something like below -
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mgfldzqpdvg00mgj5n2r.PNG)
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 -

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fl3p9xbdubvl8vqb5a7t.PNG)

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](https://dev.to/anubhab5/various-types-of-angular-component-selectors-1ec)

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_