Custom Directives in angular 2, 4, 5, 6

   Custom Directives 

- Creating our own directive based on application requirement
  Called as Custom Directive.

- In Angular, we can Use Custom Directives in 2 ways.

1) Attribute Type

2) Structural Type


 Attribute Type 


- Directive is the predefined class used to create the Custom Directive

- ElementRef is the Predefined Class used to manipulate the DOM Elements.

- HostListener is the Predefined Class used to apply the mouse events.

- Input is the Predefined Class used to pass the Dynamic Data to Custom Directive.

- Attribute Type Custom Directive won't work with the DOM Directly(memory).



         Structural Type Custom Directives 

- Structural Type Custom Directives will works with the DOM Directly.

- Structural Type Custom Directives prefix with "*"

- TemplateRef is the predefined class used to manipulate the Templates

- ViewContainerRef used to manipulate the DOM.


myDirective.ts 

import { Directive,

  ElementRef,

  HostListener,

  Input } from "@angular/core";

@Directive({

selector:"[myDir]"

})        

export class MyDirective{

@Input() var_one;

@Input() var_two;

constructor(private _el:ElementRef){}

public hiliteColor(color){

 this._el.nativeElement.style.backgroundColor = color;

}

@HostListener("mouseenter") onmouseenter(){

 this.hiliteColor(this.var_one);

};

@HostListener("mouseleave") onmouseleave(){

 this.hiliteColor(this.var_two);

};

}

app.component.ts 

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'app';

}

app.component.html 

<h1 [var_one]=color_one [var_two]=color_two myDir>Hello....!</h1>

<input type="color" [(ngModel)]="color_one"> <br><br>

<input type="color" [(ngModel)]="color_two"> <br><br>

<h1 *hello=false>Hi....!</h1>

structural.directive.ts 

import { Directive,

  TemplateRef,

  Input,

  ViewContainerRef } from "@angular/core";

@Directive({

selector:"[hello]"

}) 

export class StructuralDirective{

constructor(private _templateRef:TemplateRef<any>,

         private _viewContainerRef:ViewContainerRef){}

@Input() set hello(isHidden:boolean){

 if(isHidden){

     this._viewContainerRef.createEmbeddedView(this._templateRef);

 }else{

     this._viewContainerRef.clear();

 }

}           

}      

app.module.ts

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

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

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

import { MyDirective } from "./my.directive";

import { FormsModule } from "@angular/forms";

import { StructuralDirective } from "./structural.directive";

@NgModule({

  declarations: [

    AppComponent,

    MyDirective,

    StructuralDirective

  ],

  imports: [

    BrowserModule,

    FormsModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }