Built-in directives in Angular

In this blog ,we are going to see what are built in directives in Angular and how to use them!.

In Angular directives are special features to the html elements , using it one can modify the DOM element dynamically. It is used heavily in Angular to build interactive and dynamic UI.

Directives are instruction to DOM ,It is used to specify components and business logic in Angular

Types of Directives

There are 3 types of built-in directives in angular.

1. Component Directives
2. Structural Directives
3. Attributes Directives

1. Component Directives

Component directives are most commonly used directives . It has a component decorator ,used to declare selector , component template and styles . Whenever we create a component we need to add component directives and each components is nothing but combination of HTML template , CSS and ts file.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})

2. Structural Directives

Structural directives used to remove or add elements to the DOM dynamically based on the condition or business logic.

Mostly used built-in directives are

1. NgIf
2. NgFor
3. NgSwitch

NgIf

Conditionally show and hide elements using NgIf.

It is conceptually same as if(…) else(…) condition.

<div *ngIf="!userName">
  Please login.
</div>

Here ,in above code if userName value is false then the div is going to be added to the DOM i.e contents of div will be displayed otherwise hidden.

NgIf and Else

We can use else condition in angular as well for that we need to use ng-template as follows.

<div *ngIf="userName; else loggedOut">
  Welcome back, friend.
</div>

<ng-template #loggedOut>
  Please friend, login.
</ng-template>

NgIf, Then and Else

If the statement is true thenblock is executed otherwise elseblock will be executed.

<ng-container
  *ngIf="userName; then user; else loggedOut">
</ng-container>

<ng-template #user>
  <div>
    Welcome back.
  </div>
</ng-template>
<ng-template #loggedOut>
  <div>
    Please, login.
  </div>
</ng-template>

Hidden

Hidden will work as ngif but it will not destroy the element from the DOM.

<div [hidden]="!userName">
  Welcome.
</div>

NgFor

NgFor is used to iterate through an array of items and create DOM instance for all array items.

<li *ngFor="let user of users; index as i; first as isFirst">
  {{i}}/{{users.length}}. {{user}} <span *ngIf="isFirst">default</span>
</li>

Here , index is index of the current item in the iterable. First is a type of boolean ,it is true when first item is iterable .We can also use odd,even,last etc in the NgFor .

NgSwitch

It does something similar to switch statement. When we have multiple elements present and we want to show them when certain condition true then NgSwitch is helpful. Follow the example below.

app.component.html

<div>
  <select (change)="getProd($event)">
    <option value="tv">TV</option>
    <option value="laptop">Laptop</option>
    <option value="mobile">Mobile</option>
    <option value="radio">Radio</option>
  </select>
</div>

<ng-container [ngSwitch]="selectedItem">
  <h2 *ngSwitchDefault>Please select</h2>
  <h2 *ngSwitchCase="'tv'">TV</h2>
  <h2 *ngSwitchCase="'laptop'">laptop</h2>
  <h2 *ngSwitchCase="'mobile'">Mobile</h2>
  <h2 *ngSwitchCase="'radio'">radio</h2>
</ng-container>

app.component.ts

import { Component } from "@angular/core";

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

  getProd(event) {
    console.log(event.target.value);
    this.selectedItem = event.target.value;
  }
}

3. Attributes Directives

It is used to change the appearance or behavior of DOM elements and Angular components .

The most commonly used built-in directives are ngClass ,ngStyle .

NgClass

<div [ngClass]="val > 10 ? 'red' : 'green'">{{ val }}</div>

NgStyle

<div [ngStyle]="{'color':'red', 'font-weight':'800'}"> Hello world</div>

Thanks.