What are Angular Attribute directives?
Angular provides some built-in directive like NgStyle, NgClass etc. These directives change the appearance and behavior of HTML elements. On the other hand we can also create our own custom directive depending on application need using @Directive() decorator. It has a selector metadata that defines the custom directive name, and host is use to perform any action or event, what this directive actually does.
Built-in Angular Attribute directives:
1. NgStyle:
The NgStyle directive allow you apply style on properties of an DOM elements. With the help of variable you can apply style conditionally on attributes. Example of NgStyle Attribute directives:
|
1 |
<div [ngStyle]="{'color':'#f00'}"></<div> |
|
1 |
<div [ngStyle]="{'display':countryDisplay == true ? 'block' : 'none' }"></<div> |
nyStyle directive also allow to set individual style properties using the [style.property]. You can direct set an style property by assigning any value or and function that return some valid value.
|
1 |
<div [style.color]="getColor(info.color)">.....</div> |
2. NgClass:
With the help of NgClass directive you can to set the CSS class dynamically an DOM element. Example of NgStyle Attribute directives:
|
1 |
<div [ngClass]="{'alert-success':true}"> ..... </div> |
In the above example the keys is the class which are added to the element if the value of the key evaluates to true. So if alert-success is true then same class will apply on div.
|
1 2 3 4 5 6 |
<div [ngClass]="{ 'alert-success':form.message=== 'Success', 'alert-primary':form.message === 'Info', 'alert-danger':form.message === 'Error' }"> {{ form.info }} </div> |
In this example you can see, conditionally apply classes depending on the variables values.
Custom Attribute Directives:
Till now we have seen NgStyle and NgClass built in directive of angular. Now Angular provide ability to create oue own custom directive depending on our need. With the help of @Directive() decorator , we can also create our own custom directive. It has a selector metadata that defines the custom directive name, and host is use to perform any action or event, what this directive actually does.
Example of Custom Attribute directives:
1. woweffect.directiv.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
import { Directive, Renderer, ElementRef } from '@angular/core'; @Directive({ // @Directive decotator selector : '[wowEffect]', // Declaration for Directive Selector host: { // Event to perform on that directive '(focus)' : 'iFocus()', '(blur)' : 'iBlur()' } }) export class WowEffectDirective{ constructor(private elementRef : ElementRef, private renderer : Renderer){ this.renderer.setElementStyle(this.elementRef.nativeElement, 'border', 'solid 3px gray'); } iFocus(){ this.renderer.setElementStyle(this.elementRef.nativeElement, 'border', 'solid 3px green'); this.renderer.setElementStyle(this.elementRef.nativeElement, 'width', '300px'); } iBlur(){ this.renderer.setElementStyle(this.elementRef.nativeElement, 'border', 'solid 3px gray'); this.renderer.setElementStyle(this.elementRef.nativeElement, 'width', '150px'); } } |
In the above code snippets we have create an directive with the help of @Directive() decorator, that tells to angular, this is an directive class. In this @Directive() decorator, we have selector and host metadata. Selector is used to declare directive name which we can use in our HTML element, and host is use to perform any action or event, what this directive actually does. On above Example wowEffect Directive is bind with two event with the help of host metadata. Now Use that wowEffect Directive any element.
|
1 2 3 |
<h2>Project Name {{ userName }}</h2> Project Name: <input wowEffect type="text" [(ngModel)] = " userName"> |
In your component.ts file please define an variable
|
1 |
userName = "w3reign"; |
Example of Attribute directives:
