refactor(module:collapse): implement new control flow (#8309)

NG-ZORRO · Dec 21, 2023 · d376708 · d376708
1 parent 6f26d43
commit d376708
Show file tree

Hide file tree

Showing 9 changed files with 99 additions and 97 deletions.
diff --git a/components/collapse/collapse-panel.component.ts b/components/collapse/collapse-panel.component.ts
@@ -3,7 +3,6 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { NgIf } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -45,20 +44,24 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'collapsePanel';
   animations: [collapseMotion],
   template: `
     <div #collapseHeader role="button" [attr.aria-expanded]="nzActive" class="ant-collapse-header">
-      <div *ngIf="nzShowArrow">
-        <ng-container *nzStringTemplateOutlet="nzExpandedIcon; let expandedIcon">
-          <span
-            nz-icon
-            [nzType]="expandedIcon || 'right'"
-            class="ant-collapse-arrow"
-            [nzRotate]="nzActive ? 90 : 0"
-          ></span>
-        </ng-container>
-      </div>
+      @if (nzShowArrow) {
+        <div>
+          <ng-container *nzStringTemplateOutlet="nzExpandedIcon; let expandedIcon">
+            <span
+              nz-icon
+              [nzType]="expandedIcon || 'right'"
+              class="ant-collapse-arrow"
+              [nzRotate]="nzActive ? 90 : 0"
+            ></span>
+          </ng-container>
+        </div>
+      }
       <ng-container *nzStringTemplateOutlet="nzHeader">{{ nzHeader }}</ng-container>
-      <div class="ant-collapse-extra" *ngIf="nzExtra">
-        <ng-container *nzStringTemplateOutlet="nzExtra">{{ nzExtra }}</ng-container>
-      </div>
+      @if (nzExtra) {
+        <div class="ant-collapse-extra">
+          <ng-container *nzStringTemplateOutlet="nzExtra">{{ nzExtra }}</ng-container>
+        </div>
+      }
     </div>
     <div
       class="ant-collapse-content"
@@ -79,7 +82,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'collapsePanel';
     '[class.ant-collapse-item-disabled]': 'nzDisabled'
   },
   providers: [NzDestroyService],
-  imports: [NgIf, NzOutletModule, NzIconModule],
+  imports: [NzOutletModule, NzIconModule],
   standalone: true
 })
 export class NzCollapsePanelComponent implements OnInit, OnDestroy {

diff --git a/components/collapse/demo/accordion.ts b/components/collapse/demo/accordion.ts
@@ -4,9 +4,11 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-collapse-accordion',
   template: `
     <nz-collapse nzAccordion>
-      <nz-collapse-panel *ngFor="let panel of panels" [nzHeader]="panel.name" [nzActive]="panel.active">
-        <p>{{ panel.name }} content</p>
-      </nz-collapse-panel>
+      @for (panel of panels; track panel) {
+        <nz-collapse-panel [nzHeader]="panel.name" [nzActive]="panel.active">
+          <p>{{ panel.name }} content</p>
+        </nz-collapse-panel>
+      }
     </nz-collapse>
   `
 })

diff --git a/components/collapse/demo/basic.ts b/components/collapse/demo/basic.ts
@@ -4,17 +4,14 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-collapse-basic',
   template: `
     <nz-collapse>
-      <nz-collapse-panel
-        *ngFor="let panel of panels"
-        [nzHeader]="panel.name"
-        [nzActive]="panel.active"
-        [nzDisabled]="panel.disabled"
-      >
-        <p style="margin:0;">
-          A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome
-          guest in many households across the world.
-        </p>
-      </nz-collapse-panel>
+      @for (panel of panels; track panel) {
+        <nz-collapse-panel [nzHeader]="panel.name" [nzActive]="panel.active" [nzDisabled]="panel.disabled">
+          <p style="margin:0;">
+            A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome
+            guest in many households across the world.
+          </p>
+        </nz-collapse-panel>
+      }
     </nz-collapse>
   `
 })

diff --git a/components/collapse/demo/borderless.ts b/components/collapse/demo/borderless.ts
@@ -4,9 +4,11 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-collapse-borderless',
   template: `
     <nz-collapse [nzBordered]="false">
-      <nz-collapse-panel *ngFor="let panel of panels" [nzHeader]="panel.name" [nzActive]="panel.active">
-        <p>{{ panel.name }} content</p>
-      </nz-collapse-panel>
+      @for (panel of panels; track panel) {
+        <nz-collapse-panel [nzHeader]="panel.name" [nzActive]="panel.active">
+          <p>{{ panel.name }} content</p>
+        </nz-collapse-panel>
+      }
     </nz-collapse>
   `
 })

diff --git a/components/collapse/demo/custom.ts b/components/collapse/demo/custom.ts
@@ -4,20 +4,21 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-collapse-custom',
   template: `
     <nz-collapse [nzBordered]="false">
-      <nz-collapse-panel
-        #p
-        *ngFor="let panel of panels; let isFirst = first"
-        [nzHeader]="panel.name"
-        [nzActive]="panel.active"
-        [ngStyle]="panel.customStyle"
-        [nzExpandedIcon]="!isFirst ? panel.icon || expandedIcon : undefined"
-      >
-        <p>{{ panel.name }} content</p>
-        <ng-template #expandedIcon let-active>
-          {{ active }}
-          <span nz-icon nzType="caret-right" class="ant-collapse-arrow" [nzRotate]="p.nzActive ? 90 : -90"></span>
-        </ng-template>
-      </nz-collapse-panel>
+      @for (panel of panels; track panel) {
+        <nz-collapse-panel
+          #p
+          [nzHeader]="panel.name"
+          [nzActive]="panel.active"
+          [ngStyle]="panel.customStyle"
+          [nzExpandedIcon]="!$first ? panel.icon || expandedIcon : undefined"
+        >
+          <p>{{ panel.name }} content</p>
+          <ng-template #expandedIcon let-active>
+            {{ active }}
+            <span nz-icon nzType="caret-right" class="ant-collapse-arrow" [nzRotate]="p.nzActive ? 90 : -90"></span>
+          </ng-template>
+        </nz-collapse-panel>
+      }
     </nz-collapse>
   `
 })

diff --git a/components/collapse/demo/extra.ts b/components/collapse/demo/extra.ts
@@ -4,18 +4,19 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-collapse-extra',
   template: `
     <nz-collapse [nzExpandIconPosition]="expandIconPosition">
-      <nz-collapse-panel
-        *ngFor="let panel of panels"
-        [nzHeader]="panel.name"
-        [nzActive]="panel.active"
-        [nzExtra]="extraTpl"
-        [nzDisabled]="panel.disabled"
-      >
-        <p style="margin:0;">
-          A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome
-          guest in many households across the world.
-        </p>
-      </nz-collapse-panel>
+      @for (panel of panels; track panel) {
+        <nz-collapse-panel
+          [nzHeader]="panel.name"
+          [nzActive]="panel.active"
+          [nzExtra]="extraTpl"
+          [nzDisabled]="panel.disabled"
+        >
+          <p style="margin:0;">
+            A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome
+            guest in many households across the world.
+          </p>
+        </nz-collapse-panel>
+      }
     </nz-collapse>
     <ng-template #extraTpl>
       <!-- You can use stopPropagation if you don't want the panel to toggle -->

diff --git a/components/collapse/demo/ghost.ts b/components/collapse/demo/ghost.ts
@@ -4,17 +4,14 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-collapse-ghost',
   template: `
     <nz-collapse nzGhost>
-      <nz-collapse-panel
-        *ngFor="let panel of panels"
-        [nzHeader]="panel.name"
-        [nzActive]="panel.active"
-        [nzDisabled]="panel.disabled"
-      >
-        <p style="margin:0;">
-          A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome
-          guest in many households across the world.
-        </p>
-      </nz-collapse-panel>
+      @for (panel of panels; track panel) {
+        <nz-collapse-panel [nzHeader]="panel.name" [nzActive]="panel.active" [nzDisabled]="panel.disabled">
+          <p style="margin:0;">
+            A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome
+            guest in many households across the world.
+          </p>
+        </nz-collapse-panel>
+      }
     </nz-collapse>
   `
 })

diff --git a/components/collapse/demo/mix.ts b/components/collapse/demo/mix.ts
@@ -4,23 +4,25 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-collapse-mix',
   template: `
     <nz-collapse>
-      <nz-collapse-panel *ngFor="let panel of panels" [nzHeader]="panel.name" [nzActive]="panel.active">
-        <p>{{ panel.name }}</p>
-        <div *ngIf="panel.childPanel && panel.childPanel.length > 0">
-          <nz-collapse>
-            <nz-collapse-panel
-              *ngFor="let childPanel of panel.childPanel"
-              [nzHeader]="childPanel.name"
-              [nzActive]="childPanel.active"
-            >
-              <p>
-                A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a
-                welcome guest in many households across the world.
-              </p>
-            </nz-collapse-panel>
-          </nz-collapse>
-        </div>
-      </nz-collapse-panel>
+      @for (panel of panels; track panel) {
+        <nz-collapse-panel [nzHeader]="panel.name" [nzActive]="panel.active">
+          <p>{{ panel.name }}</p>
+          @if (panel.childPanel && panel.childPanel.length > 0) {
+            <div>
+              <nz-collapse>
+                @for (childPanel of panel.childPanel; track childPanel) {
+                  <nz-collapse-panel [nzHeader]="childPanel.name" [nzActive]="childPanel.active">
+                    <p>
+                      A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as
+                      a welcome guest in many households across the world.
+                    </p>
+                  </nz-collapse-panel>
+                }
+              </nz-collapse>
+            </div>
+          }
+        </nz-collapse-panel>
+      }
     </nz-collapse>
   `
 })

diff --git a/components/collapse/demo/noarrow.ts b/components/collapse/demo/noarrow.ts
@@ -4,17 +4,14 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-collapse-noarrow',
   template: `
     <nz-collapse>
-      <nz-collapse-panel
-        *ngFor="let panel of panels"
-        [nzHeader]="panel.name"
-        [nzActive]="panel.active"
-        [nzShowArrow]="panel.arrow"
-      >
-        <p style="margin:0;">
-          A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome
-          guest in many households across the world.
-        </p>
-      </nz-collapse-panel>
+      @for (panel of panels; track panel) {
+        <nz-collapse-panel [nzHeader]="panel.name" [nzActive]="panel.active" [nzShowArrow]="panel.arrow">
+          <p style="margin:0;">
+            A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome
+            guest in many households across the world.
+          </p>
+        </nz-collapse-panel>
+      }
     </nz-collapse>
   `
 })