Use Directives in Angular 8

Directives in Angular 8, are classes that can add new behavior to the elements in the template. Directives are used to manipulate the DOM. We can change the behavior and appearance of the DOM elements using directives. Simply we can use the HTML using directives.

Using directives, we can achieve reusability, readability and maintainability. Directives will give the high-level of reusability throughout the application. This will help in large application like same functionality required by many places.

There are 3 types of directives ?

• Component directives

• Attribute directives

• Structural directives

We can also create custom directives based on the requirement. Using @Directive decorator, we will create custom directives.

Let's look into each directive in detail.

Component Directives

Component directives are directives with templates. These are used in a main class. This contains the details of how the component is processed and used at the run time.

Structural Directives

Structural directives are used to change the design pattern of the DOM elements. Using these directives, we can redesign and redecorate the DOM elements. We can manipulate and structure the DOM using structural directives. Built-in directives are like ngIf, ngFor and ngSwitch.

We use * sign before structural directives while using them in our code.

Angular *ngIf Directive

The ngIf directive will display the DOM based on Boolean value i.e. either true or false. It allows us to add or remove DOM elements.

Example

Add code in app.component.html file. Like,

<div>
   <hp>Structural Directives</p>
   <div *ngIf="true">
      <p>Text will be displayed</p>
   </div>
   <div *ngIf="false">
      <p>Text will be hidden</p>
   </div>
</div>

In app.component.ts file. No need to write keep like below

import { Component } from "@angular/core";
@Component({
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"]
})
export class AppComponent {}

Output

Structural Directives
Text will be displayed

Angular *ngFor Directive

The ngFor directive is used to repeat the HTML template once per each item from a collection.

Example

Add code in app.component.html file

<div>
   <p>Strutural Directives</p>
   <div *ngFor="let fruit of names">
      <p>{{ fruit }}</p>
   </div>
</div>

Define names in app.component.ts files

import { Component } from "@angular/core";
@Component({
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"]
})
export class AppComponent {
   names = ["Banana", "Grapes", "Orange", "Mango", "Apple"];
}

Output

Strutural Directives
Banana
Grapes
Orange
Mango
Apple

Example

Add code in app.component.html file. Like,

<div>
   <p>Strutural Directives</p>
   <label>Select marital status</label>
   <div *ngFor="let s of status">
      <input type="radio" [value]="s" id="{{s}}" />
      <label for="{{s}}">{{s}}</label>
   </div>
   <br />
   <label>Select nationality</label>
   <div *ngFor="let n of nationality">
      <input type="radio" [value]="n" id="{{n}}" />
      <label for="{{n}}">{{n}}</label>
   </div>
</div>

Define status and nationality in app.component.ts file, like

import { Component } from "@angular/core";
@Component({
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"]
})
export class AppComponent {
   status = ["Single", "Married", "Widow"];
   nationality = ["Indian", "Other"];
}

Angular ngSwitch Directive

The ngSwitch directive is used to display between the multiple cases defined by the expression inside the ngSwitch. If no expression matches, it will display the default one.

Example

Write code in app.component.html. Like,

<div>
   <p>Strutural Directives</p>
   <div [ngSwitch]="case">
      <div *ngSwitchCase="0">Display 0</div>
      <div *ngSwitchCase="1">Display 1</div>
      <div *ngSwitchCase="2">Display 2</div>
      <div *ngSwitchDefault>Display</div>
   </div>
</div>

Define case value in app.component.ts file, Like

import { Component } from "@angular/core";
@Component({
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"]
})
export class AppComponent {
   case = "1";
}

Output

Strutural Directives
Display 1

Attribute Directives

The attribute directives are used to change the look and behavior of the DOM elements. Like, ngClass and ngStyle.

Example: ngClass Directive

The ngClass directive is used to add or remove the classes of HTML elements.

In app.component.html file

<div>
   <p>Attribute Directives</p>
   <p [ngClass]="'value > 10 ? showRed : showGreen'">{{ value }}</p>
</div>

In app.component.ts file, assign some number to the value variable. Like,

import { Component } from "@angular/core";
@Component({
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"]
})
export class AppComponent {
   value: number = 8;
}

In app.component.css file, make some colors to identify the output easily

.showRed{
   font-weight: bold;
   color: red;
}
.showGreen{
   font-weight: bold;
   color: green;
}

Output

Attribute Directives
8

If we give value greater than 10, output will be printed in red color.

Example: ngStyle directive

The ngStyle is used to add styles to the HTML elements. We can set one or more style properties using ngStyle. Let's see an example below.

In app.component.html file

<div>
   <h1>Attribute Directives</h1>
   <ul *ngFor="let fruit of fruits">
      <li [ngStyle]="{'color':setColor(fruit)}">{{fruit}}</li>
   </ul>
</div>

In app.component.ts file, Define fruits and setColor() inside the export class. Like,

import { Component } from "@angular/core";
@Component({
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"]
})
export class AppComponent {
   fruits = ["Banana", "Mango", "Apple", "Kiwi", "Orange"];
   setColor(color: string) {
      switch (color) {
         case "Banana":
         return "yellow";
         case "Mango":
         return "yellow";
         case "Apple":
         return "green";
         case "Orange":
         return "orange";
         case "kiwi":
         return "green";
         default:
         return "blue";
      }
   }
}

Output

We can create our own custom structural directives and attributes directives also.

In the above, we checked what directives are and how to use them in our code in angular. Directives used to change the behavior and structure of DOM elements and angular provides some built-in directives. We can also create custom directives.