refactor(module:input): refactor control flow component (#8356)

NG-ZORRO · Jan 17, 2024 · ff16468 · ff16468
1 parent b8e71ec
commit ff16468
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 76 deletions.
diff --git a/components/input/demo/allow-clear.ts b/components/input/demo/allow-clear.ts
@@ -7,29 +7,31 @@ import { Component } from '@angular/core';
       <input type="text" nz-input [(ngModel)]="inputValue" placeholder="input with clear icon" />
     </nz-input-group>
     <ng-template #inputClearTpl>
-      <span
-        nz-icon
-        class="ant-input-clear-icon"
-        nzTheme="fill"
-        nzType="close-circle"
-        *ngIf="inputValue"
-        (click)="inputValue = null"
-      ></span>
+      @if (inputValue) {
+        <span
+          nz-icon
+          class="ant-input-clear-icon"
+          nzTheme="fill"
+          nzType="close-circle"
+          (click)="inputValue = null"
+        ></span>
+      }
     </ng-template>
     <br />
     <br />
     <nz-input-group [nzSuffix]="textAreaClearTpl" class="ant-input-affix-wrapper-textarea-with-clear-btn">
       <textarea nz-input [(ngModel)]="textValue" placeholder="textarea with clear icon"></textarea>
     </nz-input-group>
     <ng-template #textAreaClearTpl>
-      <span
-        nz-icon
-        class="ant-input-clear-icon"
-        nzTheme="fill"
-        nzType="close-circle"
-        *ngIf="textValue"
-        (click)="textValue = null"
-      ></span>
+      @if (textValue) {
+        <span
+          nz-icon
+          class="ant-input-clear-icon"
+          nzTheme="fill"
+          nzType="close-circle"
+          (click)="textValue = null"
+        ></span>
+      }
     </ng-template>
   `
 })

diff --git a/components/input/input-group-slot.component.ts b/components/input/input-group-slot.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, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
 
 import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
@@ -15,7 +14,9 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <span nz-icon [nzType]="icon" *ngIf="icon"></span>
+    @if (icon) {
+      <span nz-icon [nzType]="icon"></span>
+    }
     <ng-container *nzStringTemplateOutlet="template">{{ template }}</ng-container>
     <ng-content></ng-content>
   `,
@@ -24,7 +25,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
     '[class.ant-input-prefix]': `type === 'prefix'`,
     '[class.ant-input-suffix]': `type === 'suffix'`
   },
-  imports: [NzIconModule, NgIf, NzOutletModule],
+  imports: [NzIconModule, NzOutletModule],
   standalone: true
 })
 export class NzInputGroupSlotComponent {

diff --git a/components/input/input-group.component.ts b/components/input/input-group.component.ts
@@ -5,7 +5,7 @@
 
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { Direction, Directionality } from '@angular/cdk/bidi';
-import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
 import {
   AfterContentInit,
   ChangeDetectionStrategy,
@@ -51,62 +51,61 @@ export class NzInputGroupWhitSuffixOrPrefixDirective {
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [NzFormNoStatusService],
   template: `
-    <span class="ant-input-wrapper ant-input-group" *ngIf="isAddOn; else noAddOnTemplate">
-      <span
-        *ngIf="nzAddOnBefore || nzAddOnBeforeIcon"
-        nz-input-group-slot
-        type="addon"
-        [icon]="nzAddOnBeforeIcon"
-        [template]="nzAddOnBefore"
-      ></span>
-      <span
-        *ngIf="isAffix || hasFeedback; else contentTemplate"
-        class="ant-input-affix-wrapper"
-        [class.ant-input-affix-wrapper-disabled]="disabled"
-        [class.ant-input-affix-wrapper-sm]="isSmall"
-        [class.ant-input-affix-wrapper-lg]="isLarge"
-        [class.ant-input-affix-wrapper-focused]="focused"
-        [ngClass]="affixInGroupStatusCls"
-      >
-        <ng-template [ngTemplateOutlet]="affixTemplate"></ng-template>
+    @if (isAddOn) {
+      <span class="ant-input-wrapper ant-input-group">
+        @if (nzAddOnBefore || nzAddOnBeforeIcon) {
+          <span nz-input-group-slot type="addon" [icon]="nzAddOnBeforeIcon" [template]="nzAddOnBefore"></span>
+        }
+
+        @if (isAffix || hasFeedback) {
+          <span
+            class="ant-input-affix-wrapper"
+            [class.ant-input-affix-wrapper-disabled]="disabled"
+            [class.ant-input-affix-wrapper-sm]="isSmall"
+            [class.ant-input-affix-wrapper-lg]="isLarge"
+            [class.ant-input-affix-wrapper-focused]="focused"
+            [ngClass]="affixInGroupStatusCls"
+          >
+            <ng-template [ngTemplateOutlet]="affixTemplate"></ng-template>
+          </span>
+        } @else {
+          <ng-template [ngTemplateOutlet]="contentTemplate" />
+        }
+        @if (nzAddOnAfter || nzAddOnAfterIcon) {
+          <span nz-input-group-slot type="addon" [icon]="nzAddOnAfterIcon" [template]="nzAddOnAfter"></span>
+        }
       </span>
-      <span
-        *ngIf="nzAddOnAfter || nzAddOnAfterIcon"
-        nz-input-group-slot
-        type="addon"
-        [icon]="nzAddOnAfterIcon"
-        [template]="nzAddOnAfter"
-      ></span>
-    </span>
-    <ng-template #noAddOnTemplate>
-      <ng-template [ngIf]="isAffix" [ngIfElse]="contentTemplate">
-        <ng-template [ngTemplateOutlet]="affixTemplate"></ng-template>
-      </ng-template>
-    </ng-template>
+    } @else {
+      @if (isAffix) {
+        <ng-template [ngTemplateOutlet]="affixTemplate" />
+      } @else {
+        <ng-template [ngTemplateOutlet]="contentTemplate" />
+      }
+    }
+
+    <!-- affix template -->
     <ng-template #affixTemplate>
-      <span
-        *ngIf="nzPrefix || nzPrefixIcon"
-        nz-input-group-slot
-        type="prefix"
-        [icon]="nzPrefixIcon"
-        [template]="nzPrefix"
-      ></span>
-      <ng-template [ngTemplateOutlet]="contentTemplate"></ng-template>
-      <span
-        *ngIf="nzSuffix || nzSuffixIcon || isFeedback"
-        nz-input-group-slot
-        type="suffix"
-        [icon]="nzSuffixIcon"
-        [template]="nzSuffix"
-      >
-        <nz-form-item-feedback-icon *ngIf="isFeedback" [status]="status"></nz-form-item-feedback-icon>
-      </span>
+      @if (nzPrefix || nzPrefixIcon) {
+        <span nz-input-group-slot type="prefix" [icon]="nzPrefixIcon" [template]="nzPrefix"></span>
+      }
+      <ng-template [ngTemplateOutlet]="contentTemplate" />
+      @if (nzSuffix || nzSuffixIcon || isFeedback) {
+        <span nz-input-group-slot type="suffix" [icon]="nzSuffixIcon" [template]="nzSuffix">
+          @if (isFeedback) {
+            <nz-form-item-feedback-icon [status]="status" />
+          }
+        </span>
+      }
     </ng-template>
+
+    <!-- content template -->
     <ng-template #contentTemplate>
       <ng-content></ng-content>
-      <span *ngIf="!isAddOn && !isAffix && isFeedback" nz-input-group-slot type="suffix">
-        <nz-form-item-feedback-icon [status]="status"></nz-form-item-feedback-icon>
-      </span>
+      @if (!isAddOn && !isAffix && isFeedback) {
+        <span nz-input-group-slot type="suffix">
+          <nz-form-item-feedback-icon [status]="status" />
+        </span>
+      }
     </ng-template>
   `,
   host: {
@@ -131,7 +130,7 @@ export class NzInputGroupWhitSuffixOrPrefixDirective {
     '[class.ant-input-group-lg]': `!isAffix && !isAddOn && isLarge`,
     '[class.ant-input-group-sm]': `!isAffix && !isAddOn && isSmall`
   },
-  imports: [NgIf, NzInputGroupSlotComponent, NgClass, NgTemplateOutlet, NzFormPatchModule],
+  imports: [NzInputGroupSlotComponent, NgClass, NgTemplateOutlet, NzFormPatchModule],
   standalone: true
 })
 export class NzInputGroupComponent implements AfterContentInit, OnChanges, OnInit, OnDestroy {

diff --git a/components/input/input-group.spec.ts b/components/input/input-group.spec.ts
@@ -395,17 +395,16 @@ export class NzTestInputGroupColComponent {}
 
 @Component({
   template: `
-    <ng-container *ngIf="!isAddon">
+    @if (!isAddon) {
       <nz-input-group [nzPrefix]="prefixTemplateClock" [nzStatus]="status">
         <input type="text" nz-input />
       </nz-input-group>
       <ng-template #prefixTemplateClock><span nz-icon nzType="clock-circle" nzTheme="outline"></span></ng-template>
-    </ng-container>
-    <ng-container *ngIf="isAddon">
+    } @else {
       <nz-input-group nzAddOnAfterIcon="setting" [nzStatus]="status">
         <input type="text" nz-input />
       </nz-input-group>
-    </ng-container>
+    }
   `
 })
 export class NzTestInputGroupWithStatusComponent {