How to create Custom Directives in Angular?
How to create Custom Directives in Angular?
02 February 2021
What is an Angular Directive?
Directives are the functions that are used to manipulate the DOM behavior and it is executed whenever Angular compiler finds it.
Types of Angular Directives
There are three types of Angular Directives.
- Attribute Directives
- Structural Directives
- Component Directives
Attribute Directives:
Attribute directives are used to manipulate the appearance and behaviors of the DOM elements. We can use the Attribute directives to change the style of the DOM element conditionally or show and hide the elements conditionally but they are not removed from the DOM.
Examples: ngStyle, ngClass, hidden
Structural Directives:
Structural directives are used to change the structure of the DOM element by adding or removing the elements. Structural Directive’s name always contains an asterisk(*) as a prefix.
Examples: *ngIf, *ngFor, *ngSwitch
Component Directives:
Component directives are directive having a template. Whereas Attribute and Structural directive don’t have a template.
Here, we’ll learn how to create a Custom Attribute and Structural directive.
Create a custom Attribute Directive
Let’s create a custom directive to change the background color.
It is very easy to create a custom directive with the Angular-CLI.
We’ve to run the following command to create a directive.
ng generate directive change-background
If we are using Angular-CLI this will be declared in the corresponding (app-) module automatically, otherwise, we’ll have to add it manually.
import {Directive} from '@angular/core';
@Directive({
selector: ['appChangeBackground']
})
export class ChangeBackgroundDirective {
constructor() {}
}
We need to import ElementRef to access the DOM element.
import {Directive, ElementRef} from '@angular/core';
@Directive({
selector: ['appChangeBackground']
})
export class ChangeBackgroundDirective {
constructor(private elementRef: ElementRef) {
elementRef.nativeElement.style.backgroundColor = '#ce4e0e’;
}
}
Now we can use this directive in our HTML file.
<button appChangeBackground>Submit</button>
Create a custom Structural Directive
Let’s create a custom Structural Directive that will work just opposite to the *ngIf directive.
We have to import Directive, TemplateRef, ViewContainerRef, Input from @angular/core.
Input decorator is used to transferring data between the two components, it passes data from one component to another using property binding.
ViewContainerRef is a container where we can attach one or more views. We’ll use the createEmbeddedView() method to attach the embedded templates to the container.
import {Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core';
@Directive({
selector: ['appNotIf']
})
export class ChangeBackgroundDirective {
constructor(private tempRef: TemplateRef<any>
private viewContainer: ViewContainerRef) {
elementRef.nativeElement.style.backgroundColor = '#fff';
}
@Input() set appNotIf(condition: boolean) {
if(!condition) {
this.viewContainer.createEmbeddedView(this.tempRef)
} else {
this.viewContainer.clear();
}
}
}
In the HTML file, we can use this directive with the given syntax.
<h1 *appNotIf='true'>True</h1> <h1 *appNotIf='false'>False</h1>
It will print ‘False’ because our directive is designed to display the false value.