refactor(module:tabs): migrate to new control flow (#8680)

NG-ZORRO · Aug 6, 2024 · 2e59d91 · 2e59d91
1 parent dc844b0
commit 2e59d91
Show file tree

Hide file tree

Showing 16 changed files with 180 additions and 143 deletions.
diff --git a/components/tabs/demo/card-top.ts b/components/tabs/demo/card-top.ts
@@ -5,11 +5,13 @@ import { Component } from '@angular/core';
   template: `
     <div class="card-container">
       <nz-tabset nzType="card">
-        <nz-tab *ngFor="let tab of tabs" [nzTitle]="'Tab Title ' + tab">
-          <p>Content of Tab Pane {{ tab }}</p>
-          <p>Content of Tab Pane {{ tab }}</p>
-          <p>Content of Tab Pane {{ tab }}</p>
-        </nz-tab>
+        @for (tab of tabs; track tab) {
+          <nz-tab [nzTitle]="'Tab Title ' + tab">
+            <p>Content of Tab Pane {{ tab }}</p>
+            <p>Content of Tab Pane {{ tab }}</p>
+            <p>Content of Tab Pane {{ tab }}</p>
+          </nz-tab>
+        }
       </nz-tabset>
     </div>
   `,

diff --git a/components/tabs/demo/card.ts b/components/tabs/demo/card.ts
@@ -4,7 +4,9 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-tabs-card',
   template: `
     <nz-tabset nzType="card">
-      <nz-tab *ngFor="let tab of tabs" [nzTitle]="'Tab' + tab">Content of Tab Pane {{ tab }}</nz-tab>
+      @for (tab of tabs; track tab) {
+        <nz-tab [nzTitle]="'Tab' + tab">Content of Tab Pane {{ tab }}</nz-tab>
+      }
     </nz-tabset>
   `
 })

diff --git a/components/tabs/demo/custom-add-trigger.ts b/components/tabs/demo/custom-add-trigger.ts
@@ -7,7 +7,9 @@ import { Component } from '@angular/core';
       <button nz-button (click)="newTab()">ADD</button>
     </div>
     <nz-tabset [(nzSelectedIndex)]="index" nzType="editable-card" nzHideAdd (nzClose)="closeTab($event)">
-      <nz-tab *ngFor="let tab of tabs; let i = index" [nzClosable]="i > 1" [nzTitle]="tab">Content of {{ tab }}</nz-tab>
+      @for (tab of tabs; track tab; let i = $index) {
+        <nz-tab [nzClosable]="i > 1" [nzTitle]="tab">Content of {{ tab }}</nz-tab>
+      }
     </nz-tabset>
   `
 })

diff --git a/components/tabs/demo/disabled.ts b/components/tabs/demo/disabled.ts
@@ -4,9 +4,11 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-tabs-disabled',
   template: `
     <nz-tabset>
-      <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab.name" [nzDisabled]="tab.disabled">
-        {{ tab.name }}
-      </nz-tab>
+      @for (tab of tabs; track tab) {
+        <nz-tab [nzTitle]="tab.name" [nzDisabled]="tab.disabled">
+          {{ tab.name }}
+        </nz-tab>
+      }
     </nz-tabset>
   `
 })

diff --git a/components/tabs/demo/editable-card.ts b/components/tabs/demo/editable-card.ts
@@ -9,7 +9,9 @@ import { Component } from '@angular/core';
       (nzAdd)="newTab()"
       (nzClose)="closeTab($event)"
     >
-      <nz-tab *ngFor="let tab of tabs" nzClosable [nzTitle]="tab">Content of {{ tab }}</nz-tab>
+      @for (tab of tabs; track tab) {
+        <nz-tab nzClosable [nzTitle]="tab">Content of {{ tab }}</nz-tab>
+      }
     </nz-tabset>
   `
 })

diff --git a/components/tabs/demo/extra.ts b/components/tabs/demo/extra.ts
@@ -4,7 +4,9 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-tabs-extra',
   template: `
     <nz-tabset [nzTabBarExtraContent]="extraTemplate">
-      <nz-tab *ngFor="let tab of tabs" [nzTitle]="'Tab ' + tab">Content of tab {{ tab }}</nz-tab>
+      @for (tab of tabs; track tab) {
+        <nz-tab [nzTitle]="'Tab ' + tab">Content of tab {{ tab }}</nz-tab>
+      }
     </nz-tabset>
     <ng-template #extraTemplate>
       <button nz-button>Extra Action</button>

diff --git a/components/tabs/demo/guard.ts b/components/tabs/demo/guard.ts
@@ -8,7 +8,9 @@ import { NzTabsCanDeactivateFn } from 'ng-zorro-antd/tabs';
   selector: 'nz-demo-tabs-guard',
   template: `
     <nz-tabset [nzCanDeactivate]="canDeactivate">
-      <nz-tab *ngFor="let tab of tabs" [nzTitle]="'Tab' + tab">Content of tab {{ tab }}</nz-tab>
+      @for (tab of tabs; track tab) {
+        <nz-tab [nzTitle]="'Tab' + tab">Content of tab {{ tab }}</nz-tab>
+      }
     </nz-tabset>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush

diff --git a/components/tabs/demo/icon.ts b/components/tabs/demo/icon.ts
@@ -4,13 +4,15 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-tabs-icon',
   template: `
     <nz-tabset>
-      <nz-tab *ngFor="let tab of tabs" [nzTitle]="titleTemplate">
-        <ng-template #titleTemplate>
-          <span nz-icon [nzType]="tab.icon"></span>
+      @for (tab of tabs; track tab) {
+        <nz-tab [nzTitle]="titleTemplate">
+          <ng-template #titleTemplate>
+            <span nz-icon [nzType]="tab.icon"></span>
+            {{ tab.name }}
+          </ng-template>
           {{ tab.name }}
-        </ng-template>
-        {{ tab.name }}
-      </nz-tab>
+        </nz-tab>
+      }
     </nz-tabset>
   `
 })

diff --git a/components/tabs/demo/position.ts b/components/tabs/demo/position.ts
@@ -8,11 +8,15 @@ import { NzTabPosition } from 'ng-zorro-antd/tabs';
     <div style="margin-bottom: 16px;">
       Tab position：
       <nz-select [(ngModel)]="position" style="width: 80px;">
-        <nz-option *ngFor="let option of options" [nzLabel]="option.label" [nzValue]="option.value"></nz-option>
+        @for (option of options; track option.value) {
+          <nz-option [nzLabel]="option.label" [nzValue]="option.value"></nz-option>
+        }
       </nz-select>
     </div>
     <nz-tabset [nzTabPosition]="position">
-      <nz-tab *ngFor="let tab of tabs" [nzTitle]="'Tab ' + tab">Content of tab {{ tab }}</nz-tab>
+      @for (tab of tabs; track tab) {
+        <nz-tab [nzTitle]="'Tab ' + tab">Content of tab {{ tab }}</nz-tab>
+      }
     </nz-tabset>
   `
 })

diff --git a/components/tabs/demo/size.ts b/components/tabs/demo/size.ts
@@ -9,7 +9,9 @@ import { Component } from '@angular/core';
       <label nz-radio-button nzValue="large"><span>Large</span></label>
     </nz-radio-group>
     <nz-tabset [nzSize]="size">
-      <nz-tab *ngFor="let tab of tabs" [nzTitle]="'Tab ' + tab">Content of tab {{ tab }}</nz-tab>
+      @for (tab of tabs; track tab) {
+        <nz-tab [nzTitle]="'Tab ' + tab">Content of tab {{ tab }}</nz-tab>
+      }
     </nz-tabset>
   `
 })

diff --git a/components/tabs/demo/slide.ts b/components/tabs/demo/slide.ts
@@ -17,17 +17,18 @@ import { NzTabPosition } from 'ng-zorro-antd/tabs';
       [(nzSelectedIndex)]="selectedIndex"
       (nzSelectChange)="log([$event])"
     >
-      <nz-tab
-        *ngFor="let tab of tabs"
-        [nzTitle]="tab.name"
-        [nzDisabled]="tab.disabled"
-        (nzSelect)="log(['select', tab])"
-        (nzClick)="log(['click', tab])"
-        (nzContextmenu)="log(['contextmenu', tab])"
-        (nzDeselect)="log(['deselect', tab])"
-      >
-        {{ tab.content }}
-      </nz-tab>
+      @for (tab of tabs; track tab) {
+        <nz-tab
+          [nzTitle]="tab.name"
+          [nzDisabled]="tab.disabled"
+          (nzSelect)="log(['select', tab])"
+          (nzClick)="log(['click', tab])"
+          (nzContextmenu)="log(['contextmenu', tab])"
+          (nzDeselect)="log(['deselect', tab])"
+        >
+          {{ tab.content }}
+        </nz-tab>
+      }
     </nz-tabset>
   `
 })

diff --git a/components/tabs/tab-body.component.ts b/components/tabs/tab-body.component.ts
@@ -3,7 +3,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -23,9 +23,9 @@ import { tabSwitchMotion } from 'ng-zorro-antd/core/animation';
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <ng-container *ngIf="hasBeenActive || forceRender">
+    @if (hasBeenActive || forceRender) {
       <ng-template [ngTemplateOutlet]="content"></ng-template>
-    </ng-container>
+    }
   `,
   host: {
     class: 'ant-tabs-tabpane',
@@ -37,7 +37,7 @@ import { tabSwitchMotion } from 'ng-zorro-antd/core/animation';
     '[@tabSwitchMotion]': `active ? 'enter' : 'leave'`,
     '[@.disabled]': `!animated`
   },
-  imports: [NgIf, NgTemplateOutlet],
+  imports: [NgTemplateOutlet],
   standalone: true,
   animations: [tabSwitchMotion]
 })

diff --git a/components/tabs/tab-nav-bar.component.ts b/components/tabs/tab-nav-bar.component.ts
@@ -8,7 +8,7 @@ import { Direction, Directionality } from '@angular/cdk/bidi';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
 import { DOWN_ARROW, ENTER, LEFT_ARROW, RIGHT_ARROW, SPACE, UP_ARROW, hasModifierKey } from '@angular/cdk/keycodes';
 import { ViewportRuler } from '@angular/cdk/overlay';
-import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import {
   AfterContentChecked,
   AfterViewInit,
@@ -71,14 +71,15 @@ const CSS_TRANSFORM_TIME = 150;
         role="tablist"
       >
         <ng-content></ng-content>
-        <button
-          role="tab"
-          [attr.tabindex]="-1"
-          *ngIf="showAddButton"
-          nz-tab-add-button
-          [addIcon]="addIcon"
-          (click)="addClicked.emit()"
-        ></button>
+        @if (showAddButton) {
+          <button
+            role="tab"
+            [attr.tabindex]="-1"
+            nz-tab-add-button
+            [addIcon]="addIcon"
+            (click)="addClicked.emit()"
+          ></button>
+        }
         <div nz-tabs-ink-bar [hidden]="hideBar" [position]="position" [animated]="inkBarAnimated"></div>
       </div>
     </div>
@@ -89,17 +90,18 @@ const CSS_TRANSFORM_TIME = 150;
       [addable]="addable"
       [items]="hiddenItems"
     ></nz-tab-nav-operation>
-    <div class="ant-tabs-extra-content" *ngIf="extraTemplate">
-      <ng-template [ngTemplateOutlet]="extraTemplate"></ng-template>
-    </div>
+    @if (extraTemplate) {
+      <div class="ant-tabs-extra-content">
+        <ng-template [ngTemplateOutlet]="extraTemplate"></ng-template>
+      </div>
+    }
   `,
   host: {
     class: 'ant-tabs-nav',
     '(keydown)': 'handleKeydown($event)'
   },
   imports: [
     NzTabScrollListDirective,
-    NgIf,
     NzTabAddButtonComponent,
     NzTabsInkBarDirective,
     NzTabNavOperationComponent,

diff --git a/components/tabs/tab-nav-operation.component.ts b/components/tabs/tab-nav-operation.component.ts
@@ -3,7 +3,6 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { NgForOf, NgIf } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -51,33 +50,36 @@ import { NzTabNavItemDirective } from './tab-nav-item.directive';
       <span nz-icon nzType="ellipsis"></span>
     </button>
     <nz-dropdown-menu #menu="nzDropdownMenu">
-      <ul nz-menu *ngIf="menuOpened">
-        <li
-          nz-menu-item
-          *ngFor="let item of items"
-          class="ant-tabs-dropdown-menu-item"
-          [class.ant-tabs-dropdown-menu-item-disabled]="item.disabled"
-          [nzSelected]="item.active"
-          [nzDisabled]="item.disabled"
-          (click)="onSelect(item)"
-          (contextmenu)="onContextmenu(item, $event)"
-        >
-          <ng-container *nzStringTemplateOutlet="item.tab.label; context: { visible: false }">
-            {{ item.tab.label }}
-          </ng-container>
-        </li>
-      </ul>
+      @if (menuOpened) {
+        <ul nz-menu>
+          @for (item of items; track item) {
+            <li
+              nz-menu-item
+              class="ant-tabs-dropdown-menu-item"
+              [class.ant-tabs-dropdown-menu-item-disabled]="item.disabled"
+              [nzSelected]="item.active"
+              [nzDisabled]="item.disabled"
+              (click)="onSelect(item)"
+              (contextmenu)="onContextmenu(item, $event)"
+            >
+              <ng-container *nzStringTemplateOutlet="item.tab.label; context: { visible: false }">
+                {{ item.tab.label }}
+              </ng-container>
+            </li>
+          }
+        </ul>
+      }
     </nz-dropdown-menu>
-    <button *ngIf="addable" nz-tab-add-button [addIcon]="addIcon" (click)="addClicked.emit()"></button>
+    @if (addable) {
+      <button nz-tab-add-button [addIcon]="addIcon" (click)="addClicked.emit()"></button>
+    }
   `,
   host: {
     class: 'ant-tabs-nav-operations',
     '[class.ant-tabs-nav-operations-hidden]': 'items.length === 0'
   },
   imports: [
     NzIconModule,
-    NgIf,
-    NgForOf,
     NzOutletModule,
     NzTabAddButtonComponent,
     NzDropdownMenuComponent,

diff --git a/components/tabs/tabset.component.spec.ts b/components/tabs/tabset.component.spec.ts
@@ -1003,9 +1003,11 @@ class DisableTabsTestComponent {
       [nzType]="'editable-card'"
       (nzSelectedIndexChange)="handleSelection($event)"
     >
-      <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab.title">
-        {{ tab.content }}
-      </nz-tab>
+      @for (tab of tabs; track tab) {
+        <nz-tab [nzTitle]="tab.title">
+          {{ tab.content }}
+        </nz-tab>
+      }
     </nz-tabset>
   `
 })
@@ -1031,10 +1033,12 @@ class DynamicTabsTestComponent {
         (nzSelectedIndexChange)="handleSelection($event)"
         [nzTabPosition]="position"
       >
-        <nz-tab *ngFor="let _tab of tabs; let i = index" [nzTitle]="titleTemplate">
-          <ng-template #titleTemplate let-visible="visible">Title in {{ visible ? 'tabs' : 'menu' }}</ng-template>
-          Content of Tab Pane {{ i }}
-        </nz-tab>
+        @for (_tab of tabs; track _tab; let i = $index) {
+          <nz-tab [nzTitle]="titleTemplate">
+            <ng-template #titleTemplate let-visible="visible">Title in {{ visible ? 'tabs' : 'menu' }}</ng-template>
+            Content of Tab Pane {{ i }}
+          </nz-tab>
+        }
       </nz-tabset>
     </div>
   `,
@@ -1059,9 +1063,11 @@ class ScrollableTabsTestComponent {
 @Component({
   template: `
     <nz-tabset>
-      <nz-tab *ngFor="let tab of tabs | async" [nzTitle]="tab.title">
-        {{ tab.content }}
-      </nz-tab>
+      @for (tab of tabs | async; track tab) {
+        <nz-tab [nzTitle]="tab.title">
+          {{ tab.content }}
+        </nz-tab>
+      }
     </nz-tabset>
   `
 })