Angular 7|8 ngSwitch Example

Author:
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:

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.

Comments

Post a Comment

Leave Comment