How to rewrite 3 ngIf to ngSwitch

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

period-header.component.html

<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 }}
        </button>
      </tui-tabs>
      <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>
    </div>
  </div>
</section>

And I have a enum to period
period.enum.ts

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>
</ng-container>

Here’s a basic example in a Stackblitz.

Leave a Reply