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 { }
