Angular 9/8/7 NgSwitch Directive Example

April 25, 2020 | Category : Angular

Hi Dev,

This tutorial is focused on *ngSwitch condition in angular example. We will use angular 9/8/7 ngSwitch directive example. you can see angular *ngSwitch example. i would like to share with you angular ngSwitch condition example. You just need to some step to done ngSwitch condition in angular 9/8/7 example.

This article will give you simple example of ngSwitch condition in angular. You can easily use ng switch in angular 6, angular 7, angular 8 and angular 9 example.

ngSwitch directive provide you to write simple switch case of javascript. you can see bellow simple example that will help you more:

src/app/app.component.ts

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

@Component({

selector: 'my-app',

templateUrl: './app.component.html',

styleUrls: [ './app.component.css' ]

})

export class AppComponent {

mySwitchVar = "one";

}

src/app/app.component.html

<h1>Angular NgSwitch Directive Example - ItSolutionstuff.com</h1>

<div [ngSwitch]="mySwitchVar">

<div *ngSwitchCase="'one'">

<p>Switch Case One</p>

</div>

<div *ngSwitchCase="'two'">

<p>Switch Case Two</p>

</div>

<div *ngSwitchCase="'three'">

<p>Switch Case Three</p>

</div>

<div *ngSwitchDefault>

<p>Switch Case Default</p>

</div>

</div>

I also posted for ng if else condition in angular. so visit on bellow link:

ngIf Else Condition in Angular

I hope it can help you...