refactor(module:tag): migrate tag component to new control flow (#8678)

NG-ZORRO · Aug 5, 2024 · 521cb7a · 521cb7a
1 parent 0a4f12c
commit 521cb7a
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 42 deletions.
diff --git a/components/tag/demo/borderless.ts b/components/tag/demo/borderless.ts
@@ -5,9 +5,9 @@ import { presetColors } from 'ng-zorro-antd/core/color';
 @Component({
   selector: 'nz-demo-tag-borderless',
   template: `
-    <ng-container *ngFor="let color of tagColors">
+    @for (color of tagColors; track color) {
       <nz-tag [nzColor]="color" [nzBordered]="false">{{ color }}</nz-tag>
-    </ng-container>
+    }
   `
 })
 export class NzDemoTagBorderlessComponent {

diff --git a/components/tag/demo/control.ts b/components/tag/demo/control.ts
@@ -3,28 +3,29 @@ import { Component, ElementRef, ViewChild } from '@angular/core';
 @Component({
   selector: 'nz-demo-tag-control',
   template: `
-    <nz-tag
-      *ngFor="let tag of tags; let i = index"
-      [nzMode]="i === 0 ? 'default' : 'closeable'"
-      (nzOnClose)="handleClose(tag)"
-    >
-      {{ sliceTagName(tag) }}
-    </nz-tag>
-    <nz-tag *ngIf="!inputVisible" class="editable-tag" nzNoAnimation (click)="showInput()">
-      <span nz-icon nzType="plus"></span>
-      New Tag
-    </nz-tag>
-    <input
-      #inputElement
-      nz-input
-      nzSize="small"
-      *ngIf="inputVisible"
-      type="text"
-      [(ngModel)]="inputValue"
-      style="width: 78px;"
-      (blur)="handleInputConfirm()"
-      (keydown.enter)="handleInputConfirm()"
-    />
+    @for (tag of tags; track tag) {
+      <nz-tag [nzMode]="$index === 0 ? 'default' : 'closeable'" (nzOnClose)="handleClose(tag)">
+        {{ sliceTagName(tag) }}
+      </nz-tag>
+    }
+
+    @if (!inputVisible) {
+      <nz-tag class="editable-tag" nzNoAnimation (click)="showInput()">
+        <span nz-icon nzType="plus"></span>
+        New Tag
+      </nz-tag>
+    } @else {
+      <input
+        #inputElement
+        nz-input
+        nzSize="small"
+        type="text"
+        [(ngModel)]="inputValue"
+        style="width: 78px;"
+        (blur)="handleInputConfirm()"
+        (keydown.enter)="handleInputConfirm()"
+      />
+    }
   `,
   styles: [
     `

diff --git a/components/tag/demo/hot-tags.ts b/components/tag/demo/hot-tags.ts
@@ -6,14 +6,15 @@ const tagsFromServer = ['Movie', 'Books', 'Music', 'Sports'];
   selector: 'nz-demo-tag-hot-tags',
   template: `
     <strong>Categories:</strong>
-    <nz-tag
-      *ngFor="let tag of hotTags"
-      nzMode="checkable"
-      [nzChecked]="selectedTags.indexOf(tag) > -1"
-      (nzCheckedChange)="handleChange($event, tag)"
-    >
-      {{ tag }}
-    </nz-tag>
+    @for (tag of hotTags; track $index) {
+      <nz-tag
+        nzMode="checkable"
+        [nzChecked]="selectedTags.indexOf(tag) > -1"
+        (nzCheckedChange)="handleChange($event, tag)"
+      >
+        {{ tag }}
+      </nz-tag>
+    }
   `
 })
 export class NzDemoTagHotTagsComponent {

diff --git a/components/tag/tag.component.ts b/components/tag/tag.component.ts
@@ -4,7 +4,6 @@
  */
 
 import { Direction, Directionality } from '@angular/cdk/bidi';
-import { NgIf } from '@angular/common';
 import {
   booleanAttribute,
   ChangeDetectionStrategy,
@@ -40,14 +39,9 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
   preserveWhitespaces: false,
   template: `
     <ng-content></ng-content>
-    <span
-      nz-icon
-      nzType="close"
-      class="ant-tag-close-icon"
-      *ngIf="nzMode === 'closeable'"
-      tabindex="-1"
-      (click)="closeTag($event)"
-    ></span>
+    @if (nzMode === 'closeable') {
+      <span nz-icon nzType="close" class="ant-tag-close-icon" tabindex="-1" (click)="closeTag($event)"></span>
+    }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
@@ -61,7 +55,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
     '[class.ant-tag-borderless]': `!nzBordered`,
     '(click)': 'updateCheckedStatus()'
   },
-  imports: [NzIconModule, NgIf],
+  imports: [NzIconModule],
   standalone: true
 })
 export class NzTagComponent implements OnChanges, OnDestroy, OnInit {