web-profile

Angular ngSwitch

html:

<ng-container [ngSwitch]="dietSelection">
  <ng-container *ngSwitchCase="'veg'">Vegetarian</ng-container>
  <ng-container *ngSwitchCase="'spicy'">Spicy</ng-container>
  <ng-container *ngSwitchDefault>Standard diet</ng-container>
</ng-container>

Multiple switch cases with the same output:

<ng-container [ngSwitch]="dietSelection">
  <ng-container *ngSwitchCase="'veg'">
    <ng-container *ngTemplateOutlet="vegTemplateRef"></ng-container>
  </ng-container>
  <ng-container *ngSwitchCase="'vegan'">
    <ng-container *ngTemplateOutlet="vegTemplateRef"></ng-container>
  </ng-container>
  <ng-container *ngSwitchCase="'spicy'">Spicy</ng-container>
  <ng-container *ngSwitchDefault>Standard diet</ng-container>

  <ng-template #vegTemplateRef>Vegetarian or vegan</ng-template>
</ng-container>

Leave a Reply

Your email address will not be published.