Angular Directives

What is Angular Directives

With the help of the Angular directive, we can manage the DOM. Directives may be used to alter the layout, appearance, and functionality of DOM elements. They aid in the extension of HTML.

In Angular, there are three different types of directives:

1. Buil-in Directives
2. Attribute directives
3. Structural directives

1.Built-in Directives 

Classes called directives are used to provide components in your Angular applications extra behaviour. Use the built-in directives of Angular to control the forms, lists, styles, and user interface.

NgClass  – Adds and removes a set of CSS classes

NgStyle –  Adds and removes a set of HTML styles.

NgModel – Adds two-way data binding to an HTML form element.

2. Attribute directives

With attribute directives, you may alter the look or behaviour of DOM elements and Angular components.

Example :

<h1>Attribute Directive</h1>

<h4>Pick a highlight color</h4>
<div>
  <input type="radio" name="colors" (click)="color='lightgreen'">Green
  <input type="radio" name="colors" (click)="color='yellow'">Yellow
  <input type="radio" name="colors" (click)="color='cyan'">Cyan
</div>
<p [appHighlight]="color">Highlight me!</p>

<p [appHighlight]="color" defaultColor="violet">
  Highlight me too!
</p>

<hr>
<p><i>Mouse over the following lines to see fixed highlights</i></p>

<p [appHighlight]="'yellow'">Highlighted in yellow</p>
<p appHighlight="orange">Highlighted in orange</p>

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(private el: ElementRef) { }

  @Input() defaultColor: string;

  @Input('appHighlight') highlightColor: string;

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.highlightColor || this.defaultColor || 'red');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

Output :

3.Structural Directives :

Structure-changing directives add and remove DOM elements to alter the DOM layout.

All Angular applications employ a collection of built-in structural directives from Angular, including NgIf, NgForOf, NgSwitch, and others.

*ngIf :

Based on the expression value that has been assigned to the DOM Element, ngIf is utilised to display or hide it. The value of the expression can either be true or false.

Example :

<div *ngIf="false">
  This text will be hidden
  <h1 [ngStyle]="{'color':'#FF0000'}">
     Structural Directive Example
  </h1>
</div>
<div *ngIf="true">
  This text will be displayed
  <h1 [ngStyle]="{'color':'#00FF00'}">
     Structural Directive Example
  </h1>
</div>

*ngFor :

The dynamic lists in the DOM are looped over using the *ngFor function. It is simply used to create lists and tables for data display in the HTML DOM.

Example :

<div *ngFor="let item of items">
 <p >  {{item}} </p>
</div>

*ngSwitch :

ngSwitch is used to choose one of several case statements that are described by the expressions inside the *ngSwitchCase when displaying on the DOM Element. If no expression matches, the default DOM Element is shown.

Example :

<div [ngSwitch]="'one'">
  <div *ngSwitchCase="'one'">One is Displayed</div>  
  <div *ngSwitchCase="'two'">Two is Displayed</div>  
  <div *ngSwitchDefault>Default Option is Displayed</div>  
</div>