Angular 12 Tutorial - Angular 12 Directives

Angular Directives are used to modify the JavaScript using the @Directive decorator.  The directors attach the metadata classes. The directives are classified into two types

• Structural

• Attribute

a) Attribute Directives

An attribute directive is used to update or modify an element's behavior and appearance. It, like the name implies, modifies an element's characteristics and properties, hence impacting its appearance on the screen.

The selector specifies an element's attribute and is used to find or insert a directive class instance within an HTML tag. The desired directive properties are implemented in the directive class.

In this tutorial, we will develop a "myBackground" directive to modify our element and change the color as we hover over it. This may be done using the typescript code below

import { Directive,ElementRef, HostListner,Input } from "@angular/core";
@Directive({
selector: "[myHighlight]"
})
export class myHighlightDirective {
constructor(private ElementRef){}
@Input() defaultcolor: string;
@Input("myHighlight") myHighlightColor: string;

@HostListner ("mouseenter") onMouseEnter(){
this.myHighlight(this.myHighlightColor || this.defaultcolor|| "green");
}
@HostListner("mouseleave") onMouseLeave(){
this.highlight(null);
}
private highlight(color: string){
this.ElementRef.style.backgroundColor = color;
}
}

From the code above:

• The directive adds the @Directive decorator functionality.

• The directive constructor is provided by ElementRef.

• The input facilitates the flow of data from the binding expression into the directive

The code above used the identifier "myBackground" to identify all HTML elements linked with it. Following the directive comes the Highlight goal, which makes additional components available.

b) The Structural directives

The structural directives allow you to reshape the DOM structure by deleting or adding items. The structural instructions, like the other directives, must be applied to the host components. This directive executes the host element's instructions.

Structural directives do not require parentheses or brackets, although they are readily identified by an asterisk (*) preceding the directive's attribute.

NgSwitch, NgFor, and NgIF are the three most used commands. The code below illustrates how these three directives are implemented in a template;

<div *ngIf="fruit"> {{fruit.name}
}</div>
<ul>
<li #ngFor="let fruit of">{{fruit.name}}</li>
</ul>
<div [ngSwitch]="fruit?.type">
<kiwi-fruit *ngSwitchCase="'kiwi'" [fruit]="fruit"> </kiwi-fruit>
<Orange-fruit *ngSwitchCase="'Orange'" [fruit]="fruit"> </Orange-fruit>
<berry-fruit *ngSwitchCase="'berry'" [fruit]="fruit"> </berry-fruit>
<unknown-fruit *ngSwitchDefault="'unknown'" [fruit]="fruit"> </unknown-fruit>
</div>

NgIF

This directive only removes or adds items to the DOM, but it does not hide them. To do this, the directive use if statements. It accepts the Boolean expression and either creates or hides the selected DOM. The following code demonstrates the use of the NgIF in the code:

NgSwitch — A switch condition that gives options using the case NgSwitchCase and the default statement NgSwitchDefault.

The switch value assigned to the NgSwitch, like switch statements, decides which switch cases are shown.

The following code demonstrates the use of NgSwitch in the code:

<div [ngSwitch]='fruit?.type'>
<kiwi-fruit *ngSwitchCase='"kiwi"' [fruit]='fruit'> </kiwi-fruit>
<Orange-fruit *ngSwitchCase='"Orange"' [fruit]='fruit'> </Orange-fruit>
<berry-fruit *ngSwitchCase='"berry"' [fruit]='fruit'> </berry-fruit>
<unknown-fruit *ngSwitchDefault='"unknown"' [fruit]='fruit'> </unknown-fruit>
</div>

In the above example, we assigned the NgSwitch(fruit) to determine which switch cases. The structural directives NgSwitchDefault and NgSwitchCase, as well as the components related to them, are denoted by the (*) prefix notation. If the NgSwitchCase matches the switch value, the NgSwitchDefault shows its host element.

NgFor-Angular transforms the *ngFor from asterisk syntax to ng-template> using the template property.

The NgFor loop, like the for loop, requires the looping variable and the list. The looping variable in the code below is let fruit, and the list is the fruits

<ng-template>
<div *ngFor='let fruits of fruits'>{{fruit.name}}</div>
<div template ='ngFor let fruit of fruits'>{{frui.name}} </div>
<ng-template ngFor let-fruit [ngForOf]= 'fruit'>{{fruit.name}}
</ng-template>

Conclusion

This chapter has covered the angular directives and has identified two types of the directives, the attributes and structural directives. You can now differentiate between the attributes and structural directives. The next chapter will discuss the angular 12 pipes