How to create a custom directive in angular

In this article, we are going to discuss the custom directive. What is a directive? Type of directives? and how to create the custom directive in the angular. We can try to find the answers of all the questions

What is Directive ?

Directives added additional behavior to the template of the angular application. Using inbuilt directive we can add behavior like adding style or class to HTML, hide or showing elements from the template, and using component directive loads the component template in another template component.

Type of Directive

There are three in-built types of directives available in Angular. The structural directive, Attribute directive, and Component directive.

Structural directive

Changes the layout of the template by adding or removing the DOM element.

Example: *ngIf, *ngFor

Attribute directive

Attribute directive is responsible for the look and feels of the HTML element or Template by using style and CSS.

Example: ngClass, ngStyle and ngModel

Component directive

Selectorof the component from the @Component decorate is rendered the template in another component template

<app-root>
</app-root>

Create custom directive

We can create the custom directive to add the custom logic in the template, for this blog we can create the directive to change the text color and its background color.

In angular, we can create custom directives by using the CLI(Command Line Interface), by adding command

ng g directive [directive_Name]

or you create the Directive without using the CLI, for this blog we are not going to use CLI to our better understanding.

Create ts file, give any name and add one class in the ts file.

export class BackgroundColorDirective {

}

Add constructor method in the class.

export class BackgroundColorDirective {
   constructor() {
   }
}

In angular to convert the simple class to component, service, Pipe, or directive we need to add a decorator. For directive, we need to add @Directive in-class file which is coming from the @angular/core.

In @Directive the object we need to add the selector, provide the name of the selector, and it is we are going to use in the angular template.

@Directive({
  selector: '[appBackgroundColor]'
})

For adding the changes in the template like text color or background color, we are using the ElementRef

ElementRef is a wrapper around a native element inside of a View. Import ElementRef from @angular/core

declare the ElementRef in the constructor as below

constructor(private eleRef:ElementRef) {
}

Add the below code for the color and background-color

  constructor(private eleRef:ElementRef) {
    this.eleRef.nativeElement.style.color="white";
    this.eleRef.nativeElement.style.background="red";
  }

Final code for the directive as below

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

@Directive({
  selector: '[appBackgroundColor]'
})
export class BackgroundColorDirective {

  constructor(private eleRef:ElementRef) {
    this.eleRef.nativeElement.style.color="white";
    this.eleRef.nativeElement.style.background="red";
  }

}

One more last change is, you need to add the directive in the declarations array

  declarations: [
    ...........,
    BackgroundColorDirective
  ],

After these all changes you can use the directive in the actual HTML template

<h1 appBackgroundColor>Custom Directive</h1>

Output:

Need help?

Read this post again, if you have any confusion or else add your questions in Community