Angular 7|8 ngSwitch Example

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

<< Back to Angular Tutorial

In this tutorial, I show you how to use Angular 6|7|8 ngSwitch directive with lots of examples.

The NgSwitch is an angular directive that displays one element from a possible set of elements based on some condition

Check out complete Angular 8 tutorial with examples - Angular 8 Tutorial with Examples.

NgSwitch Directive

The [ngSwitch] directive on a container specifies an expression to match against. The expressions to match are provided by ngSwitchCase directives on views within the container.

• Every view that matches are rendered.
• If there are no matches, a view with the ngSwitchDefault directive is rendered.
• Elements within the [NgSwitch] statement but outside of any NgSwitchCase or ngSwitchDefault directive are preserved at the location.

Syntax

Define a container element for the directive, and specify the switch expression to match against as an attribute:

<container-element [ngSwitch]="switch_expression">

Within the container, *ngSwitchCase statements specify the match expressions as attributes. Include *ngSwitchDefault as the final case.

<container-element [ngSwitch]="switch_expression"> <some-element *ngSwitchCase="match_expression_1">...</some-element> ... <some-element *ngSwitchDefault>...</some-element> </container-element>

Sample example:

<!-- ngSwitch and ngSwitchCase - enum example --> <b> ngSwitch and ngSwitchCase - enum example</b> <div [ngSwitch]="day"> <b *ngSwitchCase="days.SUNDAY"> SUNDAY</b> <b *ngSwitchCase="days.MONDAY"> MONDAY</b> <b *ngSwitchCase="days.TUESDAY">TUESDAY</b> <b *ngSwitchCase="days.WEDNESDAY">WEDNESDAY</b> <b *ngSwitchCase="days.THURSDAY">THURSDAY</b> <b *ngSwitchCase="days.FRIDAY">FRIDAY</b> <b *ngSwitchCase="days.SATURDAY">SATURDAY</b> <b *ngSwitchDefault>No Days</b> </div>

Angular 7|8 ngSwitch Example

In the previous tutorial, we have developed an Angular 8 App using Angular 8 Hello World Example Tutorial and we will continue using same Angular 8 app to demonstrates the usage of Angular 8 ngSwitch directive with examples.

In the previous tutorial, we have discussed below directives:

>> Angular 7|8 ngFor Example

>> Angular 7|8 ngIf, ngIf else, ngIf then Example

Create an Angular Component - NgSwitchComponent

Let's create NgSwitchComponent in an existing angular8-helloworld-example-tutorial project with the following command:

C:\Angular\angular8-helloworld-example-tutorial> ng g c ng-switch CREATE src/app/ng-switch/ng-switch.component.html (24 bytes) CREATE src/app/ng-switch/ng-switch.component.spec.ts (643 bytes) CREATE src/app/ng-switch/ng-switch.component.ts (280 bytes) CREATE src/app/ng-switch/ng-switch.component.css (0 bytes) UPDATE src/app/app.module.ts (890 bytes)

ng-switch.component.ts - NgSwitchComponent

The ng-switch.component.ts file defines the logic associated with NgSwitchComponent. Let's add the following content to NgSwitchComponent:

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-ng-switch', templateUrl: './ng-switch.component.html', styleUrls: ['./ng-switch.component.css'] }) export class NgSwitchComponent implements OnInit { constructor() { } ngOnInit() { } user = "Ramesh"; numbers = [1,2,3,4,5,6,7,8,9]; days = Days; day = Days.SUNDAY; } export enum Days { SUNDAY, MONDAY, TUESDAY, WEDNESDAY, THURSDAY, FRIDAY, SATURDAY }

ng-switch.component.html - ngSwitch Directive Examples

The ng-switch.component.html file defines the HTML template associated with the NgSwitchComponent. Refer the comments in this file are self-descriptive. Replace the ng-switch.component.html file with the following content in it -

<div class="container"> <h1>ngSwitch Directive Examples</h1> <!-- Simple ngSwitch Example --> <b> Simple ngSwitch Example</b> <ul [ngSwitch]="user"> <li *ngSwitchCase="'Ramesh'">Hi Ramesh</li> <li *ngSwitchCase="'Tony'">Hi Tony</li> <li *ngSwitchCase="'Tom'">Ho Tom</li> <li *ngSwitchDefault>No user found</li> </ul> <!-- ngSwitch and ngSwitchCase - even odd number example --> <b> ngSwitch and ngSwitchCase - even odd number example</b> <div *ngFor="let number of numbers"> <div ngSwitch="{{number % 2}}"> <div *ngSwitchCase="'0'">{{number}} - Even number.</div> <div *ngSwitchCase="'1'">{{number}} - Odd number.</div> <div *ngSwitchDefault>Nothing Found.</div> </div> </div> <!-- ngSwitch and ngSwitchCase - enum example --> <b> ngSwitch and ngSwitchCase - enum example</b> <div [ngSwitch]="day"> <b *ngSwitchCase="days.SUNDAY"> SUNDAY</b> <b *ngSwitchCase="days.MONDAY"> MONDAY</b> <b *ngSwitchCase="days.TUESDAY">TUESDAY</b> <b *ngSwitchCase="days.WEDNESDAY">WEDNESDAY</b> <b *ngSwitchCase="days.THURSDAY">THURSDAY</b> <b *ngSwitchCase="days.FRIDAY">FRIDAY</b> <b *ngSwitchCase="days.SATURDAY">SATURDAY</b> <b *ngSwitchDefault>No Days</b> </div> </div>

app-routing.module.ts - Add Entry Routing

Let's add below entry in app-routing.module.ts file :

 {path: 'ng-switch', component: NgSwitchComponent}

Here is a complete code:

import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { HelloWorldComponent } from './hello-world/hello-world.component'; import { NgforComponent } from './ngfor/ngfor.component'; import { NgifComponent } from './ngif/ngif.component'; import { NgSwitchComponent } from './ng-switch/ng-switch.component'; const routes: Routes = [ {path: '', component: HelloWorldComponent}, {path: 'hello-world', component: HelloWorldComponent}, {path: 'ng-for', component: NgforComponent}, {path: 'ng-if', component: NgifComponent}, {path: 'ng-switch', component: NgSwitchComponent} ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

Output

Hit this link in browser: http://localhost:4200/ng-switch

Check out complete Angular 8 tutorial with examples - Angular 8 Tutorial with Examples.

The source code of this tutorial available on my GitHub Repository.

<< Back to Angular Tutorial