How to rewrite 3 ngIf to ngSwitch

I tried to replace my ngIf with ngSwitch, which, but it doesn’t come out


<section class="period-header">
  <div class="period-header__inner">
    <div class="period-header__item">
      <tui-tabs class="period-header__tabs" tuiMobileTabs [(activeItemIndex)]="activeItemIndex">
        <button *ngFor="let tab of tabs" class="period-header__button" tuiTab tuiRipple="var(--tui-text-01)">
          {{ tab }}
      <app-day-calendar *ngIf="activeItemIndex === 0"></app-day-calendar>
      <app-week-calendar *ngIf="activeItemIndex === 1"></app-week-calendar>
      <app-month-calendar *ngIf="activeItemIndex === 2"></app-month-calendar>

And I have a enum to period

export enum Periods {
  Month = 'MONTH',
  Week = 'WEEK',
  Day = 'DAY',

>Solution :

Structural Directive: *ngSwitch

Your switch would look something like this:

<ng-container [ngSwitch]="activeItemIndex">
    <app-day-calendar *ngSwitchCase="0"></app-day-calendar>
    <app-week-calendar *ngSwitchCase="1"></app-week-calendar>
    <app-month-calendar *ngSwitchCase="2"></app-month-calendar>

Here’s a basic example in a Stackblitz.

Leave a Reply