refactor(module:radio): use the new control flow (#8480)

NG-ZORRO · Apr 5, 2024 · 0f6c11c · 0f6c11c
1 parent 5c3c29d
commit 0f6c11c
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 9 deletions.
diff --git a/components/radio/demo/radiogroup-more.ts b/components/radio/demo/radiogroup-more.ts
@@ -9,7 +9,9 @@ import { Component } from '@angular/core';
       <label nz-radio nzValue="C">Option C</label>
       <label nz-radio nzValue="M">
         More...
-        <input type="text" nz-input *ngIf="radioValue === 'M'" />
+        @if (radioValue === 'M') {
+          <input type="text" nz-input />
+        }
       </label>
     </nz-radio-group>
   `,
@@ -20,6 +22,7 @@ import { Component } from '@angular/core';
         height: 32px;
         line-height: 32px;
       }
+
       input {
         width: 100px;
         margin-left: 10px;

diff --git a/components/radio/demo/radiogroup-options.ts b/components/radio/demo/radiogroup-options.ts
@@ -4,13 +4,19 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-radio-radiogroup-options',
   template: `
     <nz-radio-group [(ngModel)]="radioValue">
-      <label nz-radio [nzValue]="o.value" *ngFor="let o of options">{{ o.label }}</label>
+      @for (o of options; track o.value) {
+        <label nz-radio [nzValue]="o.value">{{ o.label }}</label>
+      }
     </nz-radio-group>
     <nz-radio-group [(ngModel)]="radioValue">
-      <label nz-radio [nzValue]="o.value" *ngFor="let o of options">{{ o.label }}</label>
+      @for (o of options; track o.value) {
+        <label nz-radio [nzValue]="o.value">{{ o.label }}</label>
+      }
     </nz-radio-group>
     <nz-radio-group [(ngModel)]="radioValue">
-      <label nz-radio [nzValue]="o.value" *ngFor="let o of options">{{ o.label }}</label>
+      @for (o of options; track o.value) {
+        <label nz-radio [nzValue]="o.value">{{ o.label }}</label>
+      }
     </nz-radio-group>
   `
 })

diff --git a/components/radio/radio.spec.ts b/components/radio/radio.spec.ts
@@ -1,6 +1,6 @@
 import { BidiModule, Dir } from '@angular/cdk/bidi';
 import { ApplicationRef, Component, DebugElement, ViewChild } from '@angular/core';
-import { ComponentFixture, TestBed, fakeAsync, flush, tick, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, flush, TestBed, tick, waitForAsync } from '@angular/core/testing';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 
@@ -427,6 +427,7 @@ describe('radio', () => {
     });
   });
 });
+
 @Component({
   // eslint-disable-next-line
   selector: 'nz-test-radio-single',
@@ -555,7 +556,9 @@ export class NzTestRadioGroupDisabledComponent {
   template: `
     <form nz-form>
       <nz-radio-group [formControl]="formControl">
-        <label nz-radio *ngFor="let val of radioValues" [nzValue]="val">{{ val }}</label>
+        @for (val of radioValues; track val) {
+          <label nz-radio [nzValue]="val">{{ val }}</label>
+        }
       </nz-radio-group>
     </form>
   `
@@ -584,9 +587,11 @@ export class NzTestRadioGroupSolidComponent {
 @Component({
   template: `
     <nz-radio-group>
-      <label nz-radio *ngFor="let item of items" [nzValue]="item.label" [(ngModel)]="item.checked">
-        {{ item.label }}
-      </label>
+      @for (item of items; track item) {
+        <label nz-radio [nzValue]="item.label" [(ngModel)]="item.checked">
+          {{ item.label }}
+        </label>
+      }
     </nz-radio-group>
   `
 })