Understand ngIf And ngSwitch Directives In Angular 2

Introduction

Angular 2 provides many built-in directives. All these directives provide special behavior to DOM elements. In this article, we will learn ngIf and ngSwitch directives.

ngIf

ngIf directive recreates or removes the portions of the DOM which are based on the condition. Here, the condition is in the form of expression. The expression assigned to directive is set to true. Angular recreates the template and it is rendered in DOM, else it is removed from the DOM.

Syntax

<ANY ELEMENT *ngIf="condition">

</ ANY ELEMENT >

OR

< ANY ELEMENT template="ngIf condition">

</ ANY ELEMENT >

OR

<template [ngIf]="condition">
< ANY ELEMENT >...</ ANY ELEMENT >
</template>

Example

In the example mentioned below, I had shown or hidden some text, which is based on checkbox checked value.

App.componet.ts

import { Component } from '@angular/core';
@Component({
  selector: 'test-app',
  templateUrl: './app/directiveExample.html'
})
export class AppComponent {
    show = false;
}

directiveExample.html

<h4>*ngIf in Angular 2 Application</h4>
<div>
    <h4>*ngIf Example</h4>
     Show Text: <input type="checkbox" [(ngModel)]="show" />
    <div *ngIf="show">
        This is my ng-If directive test.
    </div>
</div>

Output



ngSwitch

The ngSwitch directive uses switch DOM structure conditionally in our HTML template, which is based on an expression. The ngSwitchCase and ngSwitchDefault directives are used to show and hide the template within ngSwitch directive. The "Case" attribute is used to inform the ngSwitch directive which template is to display based on an expression.

The ngSwitchCase directive creates the sub tree when the expression evaluates to the same value as the switching expression. If the multiple matches are found, all matches are displayed. The ngSwitchDefault creates a sub tree when no case expression evaluates to the same value as the switching expression.

Example

In the example mentioned below, based on dropdown selection, the text value has been changed.

App.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'test-app',
  templateUrl: './app/directiveExample.html'
})
export class AppComponent {
  data = ['<<Please Select>>', 'Tejas', 'Jignesh', 'Rakesh'];
  selected= "";
}

directiveExample.html

<div>
    <h4>*ngSwitch Example</h4>
    <select [(ngModel)]="selected">
        <option *ngFor="#item of data" [value]="item">{{item}}</option>
    </select>
    <div [ngSwitch]="selected">
        <div *ngSwitchCase="'Tejas'">You have select "Tejas"</div>
        <div *ngSwitchCase="'Rakesh'">You have select "Rakesh"</div>
        <div *ngSwitchCase="'Jignesh'">You have select "Jignesh"</div>
        <div *ngSwitchDefault>Please select name</div>
    </div>
</div>

Output



Conclusion

This article will help you to learn ngIf and ngSwitch directive in Angular 2. These directives are helpful, as it allows us to show/hide templates based on an expression.

Note

Here, I have not included the dependency of the example project. To run the project, you need to perform "npm install" command to download the project dependency.