How to Create Custom Directive Attribute in Angular9?

Angular Directives is basically a js class. We declare it as @directive. And there are 3 directives in Angular 8|9. You can take a look at the list of directives below –

Component Directives

Component directives form the main class. It possesses the details about how the component should be instantiated, processed and utilized at runtime.

Structural Directives

As far as a structure directive is concerned, it is associated with manipulating the dom elements. You will find an asterisk (*) prefix before the directive. We can take *ngFor and *ngIf as examples here.

Attribute Directives

When it comes to altering the behavior and look of the dom element, you turn to attribute directives. You can come up with your own directive as shown in the example below –

How to Create Custom Directives in Angular 7|8|9?

We are going to see more of that in this section. Custom directives are user-generated.

We are going to see how we can come up with a custom directive. We will be taking the aid of the Angular command line tool for the same.

Here is the command to create the custom directive in the Angular command line tool –

ng g directive change-color

The above command will generate 2 files, change-color.directive.ts and change-color.directive.spec.ts. And in the process, app.module.ts file is updated as well.

It looks like this in the Angular command line tool when the custom directive is generated.

LaravelCode:angular7-test harsukh21$ ng g directive change-color
CREATE src/app/change-color.directive.spec.ts (245 bytes)
CREATE src/app/change-color.directive.ts (151 bytes)
UPDATE src/app/app.module.ts (406 bytes)
LaravelCode:angular7-test harsukh21$

app.module.ts

Angular CLI imports the custom directive service “ChangeColorDirective” and defined in declarations array in app.module.ts file by default.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Custom directive imported here by Angular CLI
import { ChangeColorDirective } from './change-color.directive';


@NgModule({
  declarations: [
    AppComponent,
    ChangeColorDirective  // Custom directive is declared in declartions array by Angular CLI
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Example of Custom Angular Directive File

The change-color.directive.ts file holds a selector property and a directive. The things we define in the selector must match in the view since we assign the custom directive there.

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

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

export class ChangeColorDirective {

  constructor() { }

}

Let’s Create Custom Angular Directive Logic

// Required services for custom directives
import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appChangeColor]' // Directive selector
})

export class ChangeColorDirective {

  constructor(elem: ElementRef, renderer: Renderer2) {
    renderer.setStyle(elem.nativeElement, 'color', 'blue');
  }

}

Let’s add the appChangeColor directive in the app.component.html view as shown below –

<div style="text-align:center">

  <img width="250" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">

  <div style="padding-top: 30px">
    // appChangeColor custom Directive
    <h1 appChangeColor>I got colored by Angular Custom Directive</h1>
  </div>

</div>

Now check out the output in the browser as shown below.