perf(*): use control flow

docs/new-component.en-US.md

@@ -47,7 +47,9 @@ import { Component, Input } from '@angular/core';
   template: `
     <div [ngStyle]="style">
       <img class="img" [src]="src" [alt]="desc" />
-      <div *ngIf="desc" class="desc">{{ desc }}</div>
+      @if (desc) {
+        <div class="desc">{{ desc }}</div>
+      }
     </div>
   `,
   styleUrls: [ './index.less' ]

docs/new-component.zh-CN.md

@@ -47,7 +47,9 @@ import { Component, Input } from '@angular/core';
   template: `
     <div [ngStyle]="style">
       <img class="img" [src]="src" [alt]="desc" />
-      <div *ngIf="desc" class="desc">{{ desc }}</div>
+      @if (desc) {
+        <div class="desc">{{ desc }}</div>
+      }
     </div>
   `,
   styleUrls: [ './index.less' ]

packages/abc/auto-focus/auto-focus.directive.spec.ts

@@ -42,9 +42,11 @@ describe('abc: auto-focus', () => {
 
 @Component({
   template: `
-    <div *ngIf="showInput" class="mt-md">
-      <input auto-focus (focus)="focus()" delay="1" [enabled]="enabled" />
-    </div>
+    @if (showInput) {
+      <div class="mt-md">
+        <input auto-focus (focus)="focus()" delay="1" [enabled]="enabled" />
+      </div>
+    }
   `
 })
 class TestComponent {

packages/abc/auto-focus/demo/simple.md

@@ -20,9 +20,11 @@ import { Component } from '@angular/core';
   selector: 'app-demo',
   template: `
     <button nz-button (click)="showInput = !showInput">Toggle Input</button>
-    <div *ngIf="showInput" class="mt-md">
-      <input nz-input auto-focus />
-    </div>
+    @if (showInput) {
+      <div  class="mt-md">
+        <input nz-input auto-focus />
+      </div>
+    }
   `,
 })
 export class DemoComponent {

packages/abc/avatar-list/avatar-list.component.html

@@ -1,17 +1,23 @@
 <ul class="avatar-list__wrap">
-  <li *ngFor="let i of items" [ngClass]="cls">
-    <nz-avatar
-      *ngIf="i.tips"
-      nz-tooltip
-      [nzTooltipTitle]="i.tips"
-      [nzSrc]="i.src"
-      [nzText]="i.text"
-      [nzIcon]="i.icon"
-      [nzSize]="avatarSize"
-    />
-    <nz-avatar *ngIf="!i.tips" [nzSrc]="i.src" [nzText]="i.text" [nzIcon]="i.icon" [nzSize]="avatarSize" />
-  </li>
-  <li *ngIf="exceedCount > 0" [ngClass]="cls">
-    <nz-avatar [nzSize]="avatarSize" style="cursor: auto" [ngStyle]="excessItemsStyle" [nzText]="'+' + exceedCount" />
-  </li>
+  @for (i of items; track $index) {
+    <li [ngClass]="cls">
+      @if (i.tips) {
+        <nz-avatar
+          nz-tooltip
+          [nzTooltipTitle]="i.tips"
+          [nzSrc]="i.src"
+          [nzText]="i.text"
+          [nzIcon]="i.icon"
+          [nzSize]="avatarSize"
+        />
+      } @else {
+        <nz-avatar [nzSrc]="i.src" [nzText]="i.text" [nzIcon]="i.icon" [nzSize]="avatarSize" />
+      }
+    </li>
+  }
+  @if (exceedCount > 0) {
+    <li [ngClass]="cls">
+      <nz-avatar [nzSize]="avatarSize" style="cursor: auto" [ngStyle]="excessItemsStyle" [nzText]="'+' + exceedCount" />
+    </li>
+  }
 </ul>

packages/abc/cell/demo/simple.md

@@ -26,7 +26,9 @@ import { CellBadge, CellFuValue, CellOptions, CellRenderType } from '@delon/abc/
   selector: 'app-demo',
   template: `
     <div nz-row nzGutter="16" class="mt-md">
-      <div *ngFor="let i of baseList" nz-col nzSpan="8"> {{ i | json }} => <cell [value]="i" /> </div>
+      @for (i of baseList; track $index) {
+        <div nz-col nzSpan="8"> {{ i | json }} => <cell [value]="i" /> </div>
+      }
       <div nz-col nzSpan="8"> date-fn => <cell [value]="day3" [options]="{ date: { format: 'fn' } }" /> </div>
       <div nz-col nzSpan="8"> mega => <cell value="15900000000" size="large" [options]="{ type: 'mega' }" /> </div>
       <div nz-col nzSpan="8"> mask => <cell value="15900000000" [options]="{ mask: '999****9999' }" /> </div>
@@ -107,10 +109,12 @@ import { CellBadge, CellFuValue, CellOptions, CellRenderType } from '@delon/abc/
         default =>
         <cell [value]="null" />
       </div>
-      <div *ngFor="let i of typeList" nz-col nzSpan="8">
-        {{ i }} =>
-        <cell [value]="i" [options]="{ renderType: i }" />
-      </div>
+      @for (i of typeList; track $index) {
+        <div nz-col nzSpan="8">
+          {{ i }} =>
+          <cell [value]="i" [options]="{ renderType: i }" />
+        </div>
+      }
       <div nz-col nzSpan="8">
         size =>
         <cell value="small" size="small" />, <cell value="default" />,
@@ -128,7 +132,9 @@ import { CellBadge, CellFuValue, CellOptions, CellRenderType } from '@delon/abc/
       <div nz-col nzSpan="8">
         Async =>
         <cell [value]="async" [loading]="asyncLoading" />
-        <a *ngIf="!asyncLoading" (click)="again()" class="ml-md">Again</a>
+        @if (!asyncLoading) {
+          <a (click)="again()" class="ml-md">Again</a>
+        }
       </div>
       <div nz-col nzSpan="8"> Unit => <cell value="3" [options]="{ unit: '人' }" /> </div>
       <div nz-col nzSpan="8"> Text Unit => <cell [value]="{ text: '100', unit: '元' }" /> </div>

packages/abc/count-down/count-down.component.ts

@@ -14,7 +14,9 @@ import { CountdownComponent, CountdownConfig, CountdownEvent } from 'ngx-countdo
 @Component({
   selector: 'count-down',
   exportAs: 'countDown',
-  template: `<countdown #cd *ngIf="config" [config]="config" (event)="handleEvent($event)" />`,
+  template: `@if (config) {
+    <countdown #cd [config]="config" (event)="handleEvent($event)" />
+  }`,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None

packages/abc/count-down/count-down.spec.ts

@@ -50,12 +50,16 @@ describe('abc: count-down', () => {
 
 @Component({
   template: `
-    <div *ngIf="config">
-      <count-down [config]="config" (event)="handleEvent()" style="font-size: 20px" />
-    </div>
-    <div *ngIf="target">
-      <count-down [target]="target" (event)="handleEvent()" style="font-size: 20px" />
-    </div>
+    @if (config) {
+      <div>
+        <count-down [config]="config" (event)="handleEvent()" style="font-size: 20px" />
+      </div>
+    }
+    @if (target) {
+      <div>
+        <count-down [target]="target" (event)="handleEvent()" style="font-size: 20px" />
+      </div>
+    }
   `
 })
 class TestComponent {

packages/abc/date-picker/range-shortcut.component.ts

@@ -6,12 +6,9 @@ import { AlainDateRangePickerShortcutItem } from '@delon/util/config';
   selector: '',
   template: `
     <ng-template #tpl>
-      <a
-        *ngFor="let i of list; let first = first"
-        (click)="click(i)"
-        [innerHTML]="i._text"
-        [ngClass]="{ 'ml-sm': !first }"
-      ></a>
+      @for (i of list; track $index) {
+        <a (click)="click(i)" [innerHTML]="i._text" [ngClass]="{ 'ml-sm': !$first }"></a>
+      }
     </ng-template>
   `
 })

packages/abc/down-file/demo/simple.md

@@ -19,17 +19,18 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-demo',
   template: `
-    <button
-      *ngFor="let i of fileTypes"
-      nz-button
-      down-file
-      [http-data]="data"
-      http-url="./assets/demo{{ i }}"
-      file-name="demo中文"
-      class="mr-sm"
-    >
-      {{ i }}
-    </button>
+    @for (i of fileTypes; track $index) {
+      <button
+        nz-button
+        down-file
+        [http-data]="data"
+        http-url="./assets/demo{{ i }}"
+        file-name="demo中文"
+        class="mr-sm"
+      >
+        {{ i }}
+      </button>
+    }
   `,
 })
 export class DemoComponent {

packages/abc/down-file/down-file.spec.ts

@@ -204,21 +204,22 @@ describe('abc: down-file', () => {
 
 @Component({
   template: `
-    <button
-      *ngFor="let i of fileTypes"
-      id="down-{{ i }}"
-      down-file
-      [http-data]="data"
-      [http-body]="body"
-      [http-method]="method"
-      http-url="/demo.{{ i }}"
-      [file-name]="fileName"
-      [pre]="pre"
-      (success)="success()"
-      (error)="error()"
-    >
-      {{ i }}
-    </button>
+    @for (i of fileTypes; track $index) {
+      <button
+        id="down-{{ i }}"
+        down-file
+        [http-data]="data"
+        [http-body]="body"
+        [http-method]="method"
+        http-url="/demo.{{ i }}"
+        [file-name]="fileName"
+        [pre]="pre"
+        (success)="success()"
+        (error)="error()"
+      >
+        {{ i }}
+      </button>
+    }
   `
 })
 class TestComponent {

packages/abc/ellipsis/ellipsis.component.html

@@ -1,35 +1,42 @@
 <div (cdkObserveContent)="refresh()" #orgEl style="display: none"><ng-content /></div>
 <ng-template #tooltipTpl let-con>
-  <span
-    *ngIf="tooltip; else con"
-    nz-tooltip
-    [nzTooltipTitle]="titleTpl"
-    [nzTooltipOverlayStyle]="{ 'overflow-wrap': 'break-word', 'word-wrap': 'break-word' }"
-  >
+  @if (tooltip) {
+    <span
+      nz-tooltip
+      [nzTooltipTitle]="titleTpl"
+      [nzTooltipOverlayStyle]="{ 'overflow-wrap': 'break-word', 'word-wrap': 'break-word' }"
+    >
+      <ng-container *ngTemplateOutlet="con" />
+      <ng-template #titleTpl><div [innerHTML]="orgHtml"></div></ng-template>
+    </span>
+  } @else {
     <ng-container *ngTemplateOutlet="con" />
-    <ng-template #titleTpl><div [innerHTML]="orgHtml"></div></ng-template>
-  </span>
+  }
 </ng-template>
-<ng-container [ngSwitch]="type">
-  <span *ngSwitchCase="'default'" [ngClass]="cls"></span>
-  <ng-container *ngSwitchCase="'length'">
+@switch (type) {
+  @case ('default') {
+    <span [ngClass]="cls"></span>
+  }
+  @case ('length') {
     <ng-template [ngTemplateOutlet]="tooltipTpl" [ngTemplateOutletContext]="{ $implicit: lengthTpl }" />
     <ng-template #lengthTpl>{{ text }}</ng-template>
-  </ng-container>
-  <ng-container *ngSwitchCase="'line-clamp'">
+  }
+  @case ('line-clamp') {
     <ng-template [ngTemplateOutlet]="tooltipTpl" [ngTemplateOutletContext]="{ $implicit: lineClampTpl }" />
     <ng-template #lineClampTpl>
       <div [ngClass]="cls" [ngStyle]="{ '-webkit-line-clamp': lines, '-webkit-box-orient': 'vertical' }"></div>
     </ng-template>
-  </ng-container>
-  <div *ngSwitchCase="'line'" [ngClass]="cls">
-    <div class="ellipsis__handle">
-      <ng-template [ngTemplateOutlet]="tooltipTpl" [ngTemplateOutletContext]="{ $implicit: lineTpl }" />
-      <ng-template #lineTpl>{{ linsWord }}</ng-template>
-      <div class="ellipsis__shadow" #shadowOrgEl [innerHTML]="orgHtml"></div>
-      <div class="ellipsis__shadow" #shadowTextEl>
-        <span>{{ text }}</span>
+  }
+  @case ('line') {
+    <div [ngClass]="cls">
+      <div class="ellipsis__handle">
+        <ng-template [ngTemplateOutlet]="tooltipTpl" [ngTemplateOutletContext]="{ $implicit: lineTpl }" />
+        <ng-template #lineTpl>{{ linsWord }}</ng-template>
+        <div class="ellipsis__shadow" #shadowOrgEl [innerHTML]="orgHtml"></div>
+        <div class="ellipsis__shadow" #shadowTextEl>
+          <span>{{ text }}</span>
+        </div>
       </div>
     </div>
-  </div>
-</ng-container>
+  }
+}

packages/abc/exception/exception.component.html

@@ -8,8 +8,10 @@ <h1 class="exception__cont-title" [innerHTML]="_title"></h1>
     <div (cdkObserveContent)="checkContent()" #conTpl>
       <ng-content />
     </div>
-    <button *ngIf="!hasCon" nz-button [routerLink]="backRouterLink" [nzType]="'primary'">
-      {{ locale.backToHome }}
-    </button>
+    @if (!hasCon) {
+      <button nz-button [routerLink]="backRouterLink" [nzType]="'primary'">
+        {{ locale.backToHome }}
+      </button>
+    }
   </div>
 </div>

packages/abc/footer-toolbar/footer-toolbar.component.html

@@ -2,6 +2,8 @@
   <ng-container *nzStringTemplateOutlet="extra">{{ extra }}</ng-container>
 </div>
 <div class="footer-toolbar__right">
-  <error-collect *ngIf="errorCollect" />
+  @if (errorCollect) {
+    <error-collect />
+  }
   <ng-content />
 </div>

packages/abc/global-footer/global-footer.component.html

@@ -1,9 +1,15 @@
-<div *ngIf="links.length > 0 || items.length > 0" class="global-footer__links">
-  <a *ngFor="let i of links" class="global-footer__links-item" (click)="to(i)" [innerHTML]="i._title"></a>
-  <a *ngFor="let i of items" class="global-footer__links-item" (click)="to(i)">
-    <ng-container *ngTemplateOutlet="i.host" />
-  </a>
-</div>
+@if (links.length > 0 || items.length > 0) {
+  <div class="global-footer__links">
+    @for (i of links; track $index) {
+      <a class="global-footer__links-item" (click)="to(i)" [innerHTML]="i._title"></a>
+    }
+    @for (i of items; track $index) {
+      <a class="global-footer__links-item" (click)="to(i)">
+        <ng-container *ngTemplateOutlet="i.host" />
+      </a>
+    }
+  </div>
+}
 <div class="global-footer__copyright">
   <ng-content />
 </div>

packages/abc/let/demo/async.md

@@ -23,13 +23,13 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
 @Component({
   selector: 'app-demo',
   template: `
-    <ng-container *ngIf="timer$ !== null">
+    @if (timer$ !== null) {
       <ng-container *let="timer$ | async as time">
         <p>Timer value: {{ time }}</p>
         <p>Timer value: {{ time }}</p>
         <p>Timer value: {{ time }}</p>
       </ng-container>
-    </ng-container>
+    }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush
 })

packages/abc/loading/demo/custom.md

@@ -20,7 +20,10 @@ import { LoadingCustom, LoadingService } from '@delon/abc/loading';
 
 @Component({
   selector: 'app-demo',
-  template: ` <button *ngFor="let i of customs" nz-button (click)="show(i)">{{ i.name }}</button> `,
+  template: `
+  @for (i of customs; track $index) {
+    <button nz-button (click)="show(i)">{{ i.name }}</button>
+  }`,
 })
 export class DemoComponent {
   customs: LoadingCustom[] = [