refactor(module:resizable): use the new control flow (#8484)

NG-ZORRO · Apr 9, 2024 · a27a47e · a27a47e
1 parent b678b18
commit a27a47e
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 47 deletions.
diff --git a/components/resizable/demo/drawer.ts b/components/resizable/demo/drawer.ts
@@ -19,19 +19,14 @@ import { NzResizeEvent } from 'ng-zorro-antd/resizable';
       (nzOnClose)="close()"
     >
       <ng-container *nzDrawerContent>
-        <div
-          *ngIf="visible"
-          class="drawer-body"
-          nz-resizable
-          nzBounds="window"
-          [nzMinWidth]="256"
-          (nzResize)="onResize($event)"
-        >
-          <nz-resize-handles [nzDirections]="['right']"></nz-resize-handles>
-          <p>Some contents...</p>
-          <p>Some contents...</p>
-          <p>Some contents...</p>
-        </div>
+        @if (visible) {
+          <div class="drawer-body" nz-resizable nzBounds="window" [nzMinWidth]="256" (nzResize)="onResize($event)">
+            <nz-resize-handles [nzDirections]="['right']" />
+            <p>Some contents...</p>
+            <p>Some contents...</p>
+            <p>Some contents...</p>
+          </div>
+        }
       </ng-container>
     </nz-drawer>
   `,

diff --git a/components/resizable/demo/table.ts b/components/resizable/demo/table.ts
@@ -8,35 +8,39 @@ import { NzResizeEvent } from 'ng-zorro-antd/resizable';
     <nz-table #basicTable [nzData]="listOfData">
       <thead>
         <tr>
-          <ng-container *ngFor="let col of cols">
-            <th
-              *ngIf="col.width"
-              nz-resizable
-              nzBounds="window"
-              nzPreview
-              [nzWidth]="col.width"
-              [nzMaxWidth]="256"
-              [nzMinWidth]="60"
-              (nzResizeEnd)="onResize($event, col.title)"
-            >
-              {{ col.title }}
-              <nz-resize-handle nzDirection="right">
-                <div class="resize-trigger"></div>
-              </nz-resize-handle>
-            </th>
-            <th *ngIf="!col.width">
-              {{ col.title }}
-            </th>
-          </ng-container>
+          @for (col of cols; track col) {
+            @if (col.width) {
+              <th
+                nz-resizable
+                nzBounds="window"
+                nzPreview
+                [nzWidth]="col.width"
+                [nzMaxWidth]="256"
+                [nzMinWidth]="60"
+                (nzResizeEnd)="onResize($event, col.title)"
+              >
+                {{ col.title }}
+                <nz-resize-handle nzDirection="right">
+                  <div class="resize-trigger"></div>
+                </nz-resize-handle>
+              </th>
+            } @else {
+              <th>
+                {{ col.title }}
+              </th>
+            }
+          }
         </tr>
       </thead>
       <tbody>
-        <tr *ngFor="let data of basicTable.data">
-          <td>{{ data.name }}</td>
-          <td>{{ data.age }}</td>
-          <td>{{ data.address }}</td>
-          <td>-</td>
-        </tr>
+        @for (data of basicTable.data; track data) {
+          <tr>
+            <td>{{ data.name }}</td>
+            <td>{{ data.age }}</td>
+            <td>{{ data.address }}</td>
+            <td>-</td>
+          </tr>
+        }
       </tbody>
     </nz-table>
   `,
@@ -50,7 +54,7 @@ import { NzResizeEvent } from 'ng-zorro-antd/resizable';
   ]
 })
 export class NzDemoResizableTableComponent {
-  cols = [
+  cols: Array<{ title: string; width?: string }> = [
     {
       title: 'Name',
       width: '180px'
@@ -88,6 +92,7 @@ export class NzDemoResizableTableComponent {
       address: 'Sidney No. 1 Lake Park'
     }
   ];
+
   onResize({ width }: NzResizeEvent, col: string): void {
     this.cols = this.cols.map(e => (e.title === col ? { ...e, width: `${width}px` } : e));
   }

diff --git a/components/resizable/resize-handles.component.ts b/components/resizable/resize-handles.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 } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 
 import { NzCursorType, NzResizeDirection, NzResizeHandleComponent } from './resize-handle.component';
@@ -41,14 +40,12 @@ function normalizeResizeHandleOptions(value: Array<NzResizeDirection | NzResizeH
   selector: 'nz-resize-handles',
   exportAs: 'nzResizeHandles',
   template: `
-    <nz-resize-handle
-      *ngFor="let option of resizeHandleOptions"
-      [nzDirection]="option.direction"
-      [nzCursorType]="option.cursorType"
-    ></nz-resize-handle>
+    @for (option of resizeHandleOptions; track option) {
+      <nz-resize-handle [nzDirection]="option.direction" [nzCursorType]="option.cursorType" />
+    }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NzResizeHandleComponent, NgForOf],
+  imports: [NzResizeHandleComponent],
   standalone: true
 })
 export class NzResizeHandlesComponent implements OnChanges {