Sur cette page, nous fournirons un exemple Angular NgSwitch. NgSwitch est une directive angulaire qui affiche un élément d'un ensemble possible d'éléments en fonction d'une condition. NgSwitch utilise les directives NgSwitchCase et NgSwitchDefault. NgSwitch utilise le mot-clé ngSwitchCase pour définir un ensemble d'arborescences d'éléments possibles et ngSwitchDefault est utilisé pour définir la valeur par défaut lorsque la condition d'expression ne correspond à aucune arborescence d'éléments définie par ngSwitchCase. Le NgSwitch est utilisé comme liaison de propriété telle que [ngSwitch] avec crochet [ ]. Pour définir un ensemble possible d'éléments, nous devons ajouter un astérisque (*) comme préfixe aux mots-clés de cas de commutation comme *ngSwitchCase et *ngSwitchDefault. Chaque fois que NgSwitch trouve une correspondance évaluée par expression, l'élément respectif défini par ngSwitchCase est ajouté au DOM et si aucune correspondance n'est trouvée, l'élément défini par ngSwitchDefault est ajouté au DOM. Ici, sur cette page, nous fournirons un exemple de NgSwitch avec NgFor ainsi que NgClass utilisant TypeScript. Nous fournirons également l'exemple de l'utilisation de l'énumération TypeScript avec NgSwitch.

NgSwitch

NgSwitch

directionEnum.ts

export enum DirectionEnum {
    East, West, North, South 
}  

person.component.ts

import { Component } from '@angular/core';
import { DirectionEnum } from './directionEnum';
@Component({
    selector: 'person-app',
    templateUrl: './person.component.html',
    styleUrls: ['./person.component.css']
})
export class PersonComponent {
    person = 'Sohan';
    ids = [1, 2, 3, 4];
    dirEnum = DirectionEnum;
    myDir = DirectionEnum.North;
} 

person.component.html

<ul [ngSwitch]="person">
  <li *ngSwitchCase="'Mohan'">Hello Mohan</li>
  <li *ngSwitchCase="'Sohan'">Hello Sohan</li>
  <li *ngSwitchCase="'Vijay'">Hello Vijay</li>
  <li *ngSwitchDefault>Bye Bye</li>
</ul>

<div *ngFor="let id of ids">
  Id is {{id}}
  <div ngSwitch="{{id%2}}">
<div *ngSwitchCase="'0'" [ngClass]="'one'">I am Even.</div>
<div *ngSwitchCase="'1'" [ngClass]="'two'">I am Odd.</div>
<div *ngSwitchDefault>Nothing Found.</div>
  </div> 
</div>

<div [ngSwitch]="myDir">
   East Direction</b>
   West Direction</b>
  North Direction</b>
  South Direction</b>
  No Direction</b>
</div>

<div [ngSwitch]="myDir">
  <ng-template [ngSwitchCase]= "dirEnum.East"> <b> East Direction</b> </ng-template>
  <ng-template [ngSwitchCase]= "dirEnum.West"> <b> West Direction</b> </ng-template>
  <ng-template [ngSwitchCase]= "dirEnum.North"> <b>North Direction</b> </ng-template>
  <ng-template [ngSwitchCase]= "dirEnum.South"> <b>South Direction</b> </ng-template>
  <ng-template ngSwitchDefault> <b> No Direction</b> </ng-template>
</div> 

person.component.css

.one {
    color: green;
}
.two {
    color: red;
} 

app.component.ts

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

@Component({
   selector: 'app-root',
   template: `
<person-app></person-app>
             `
})
export class AppComponent {
}  

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { PersonComponent } from './person.component';

@NgModule({
    imports: [
        BrowserModule
    ],
    declarations: [
        AppComponent,
        PersonComponent
    ],
    providers: [
    ],
    bootstrap: [
        AppComponent
    ]
})
export class AppModule { }