How to rewrite 3 ngIf to ngSwitch-CodePudding

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

period-header.component.html

<section >
  <div >
    <div >
      <tui-tabs  tuiMobileTabs [(activeItemIndex)]="activeItemIndex">
        <button *ngFor="let tab of tabs"  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',
}

CodePudding user response：

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.