How to Create Custom Directive in Angular 12?

In this tutorial we will learn to create the custom directive in angular and how to use them in our project. Custom directives are those directives by which we can enhance the html capabilities and can bind custom attributes, methods to it. We can reuse them in any element or custom html tag. In angular directives are almost same as component but in directives we can perform some additional tasks as well like hovering, host elements, binding etc. let’s begin with Custom Directives Tutorial in Angular

Types of Custom directive in angular

In angular there is two types of directives

1. Attributes Directives
2. Structural Directives

1. Attributes Directives : Attributes directives are used to change behavior or appearance of the html examples are NgClass, NgStyle.
2. Structural Directives: Structural Directives are used to add or remove the elements from the Dom examples are *ngIf, *ngFor etc. Structural directives start with *.

In this tutorial we will cover the attribute directive so Let’s understand it by step by step process.

Step 1 : Create a new custom diretive

You can simply create a custom directive using angular cli

ng generate directive myInit

this will create two files src/app/my-init.directive.ts and src/app/my-init.directive.spec.ts. It will also import the new directive to our module app.module.ts.

You can also create the file manually and add it to the modules and add simple code

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

@Directive({
  selector: '[appMyInit]'
})
export class MyInitDirective {

  constructor() { }

}

Here, we have added @Directive and added selector to appMyInit which is name of our directive.

Step 2: Import the new directive to module

If you have created the file manually then its required to add it into our module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { MyInitDirective } from './my-init.directive';

@NgModule({
  declarations: [
    AppComponent,
    MyInitDirective
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3 : Add logic into MyInitDirective

import { Directive,ElementRef } from '@angular/core';
@Directive({
  selector: '[appMyInit]'
})
export class MyInitDirective {

  constructor(el: ElementRef){
    el.nativeElement.style.backgroundColor = 'yellow';
  }
  ngOnInit() {
      
  }



}

Here, we have injected ElementRef to find the element and change the appereance.

Step 4: Using new directive into html element

Now, we are going to use our newly created directive to any element.

<h1>Angular 2 custom ngInit directive  -ReaderStacks.com </h1>

 Original Title : {{title}}

<div appMyInit>
   Updated title in html view : {{title}}

</div>
 

and component

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'rest-api';
}

Changing Appearance on user events

We can also handle appearance on user events like click, hover, mouse enter, leave etc. by adding the HostListener in angular.

@HostListener('click', ['$event.target']) 
onClick() {
    this.el.nativeElement.style.backgroundColor ='red';
}
 

Check the example and download code: