feat(module:table): radio selection type

components/table/src/addon/selection.component.ts

@@ -20,44 +20,40 @@
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   template: `
-    <label
-      *ngIf="showCheckbox && nzRowSelectionType === 'checkbox'"
-      nz-checkbox
-      [class.ant-table-selection-select-all-custom]="showRowSelection"
-      [ngModel]="checked"
-      [nzDisabled]="disabled"
-      [nzIndeterminate]="indeterminate"
-      [attr.aria-label]="label"
-      (ngModelChange)="onCheckedChange($event)"
-    ></label>
-    <div class="ant-table-selection-extra" *ngIf="showRowSelection && nzRowSelectionType === 'checkbox'">
-      <span nz-dropdown class="ant-table-selection-down" nzPlacement="bottomLeft" [nzDropdownMenu]="selectionMenu">
-        <span nz-icon nzType="down"></span>
-      </span>
-      <nz-dropdown-menu #selectionMenu="nzDropdownMenu">
-        <ul nz-menu class="ant-table-selection-menu">
-          <li nz-menu-item *ngFor="let selection of listOfSelections" (click)="selection.onSelect()">
-            {{ selection.text }}
-          </li>
-        </ul>
-      </nz-dropdown-menu>
-    </div>
+    @if (showCheckbox && nzRowSelectionType === 'checkbox') {
+      <label
+        nz-checkbox
+        [class.ant-table-selection-select-all-custom]="showRowSelection"
+        [ngModel]="checked"
+        [nzDisabled]="disabled"
+        [nzIndeterminate]="indeterminate"
+        [attr.aria-label]="label"
+        (ngModelChange)="onCheckedChange($event)"
+      ></label>
+    }
+    @if (showRowSelection && nzRowSelectionType === 'checkbox') {
+      <div class="ant-table-selection-extra">
+        <span nz-dropdown class="ant-table-selection-down" nzPlacement="bottomLeft" [nzDropdownMenu]="selectionMenu">
+          <span nz-icon nzType="down"></span>
+        </span>
+        <nz-dropdown-menu #selectionMenu="nzDropdownMenu">
+          <ul nz-menu class="ant-table-selection-menu">
+            @for (selection of listOfSelections; track selection) {
+              <li nz-menu-item (click)="selection.onSelect()">
+                {{ selection.text }}
+              </li>
+            }
+          </ul>
+        </nz-dropdown-menu>
+      </div>
+    }
   `,
   host: { class: 'ant-table-selection' },
-  imports: [
-    NgIf,
-    FormsModule,
-    NzCheckboxModule,
-    NzDropDownModule,
-    NzIconModule,
-    NgForOf,
-    NzRadioComponent,
-    NzRadioGroupComponent
-  ],
+  imports: [FormsModule, NzCheckboxModule, NzDropDownModule, NzIconModule, NzRadioComponent, NzRadioGroupComponent],
   standalone: true
 })
 export class NzTableSelectionComponent {
   @Input() nzRowSelectionType: NzRowSelectionType = 'checkbox';
   @Input() listOfSelections: Array<{ text: string; onSelect(...args: NzSafeAny[]): NzSafeAny }> = [];
   @Input() checked = false;
   @Input() disabled = false;

components/table/src/cell/td-addon.component.ts

@@ -21,8 +21,6 @@
 import { FormsModule } from '@angular/forms';
 
 import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
-import { BooleanInput } from 'ng-zorro-antd/core/types';
-import { InputBoolean } from 'ng-zorro-antd/core/util';
 import { NzRadioComponent, NzRadioGroupComponent } from 'ng-zorro-antd/radio';
 
 import { NzRowExpandButtonDirective } from '../addon/row-expand-button.directive';
@@ -47,44 +45,35 @@
           (expandChange)="onExpandChange($event)"
           [spaceMode]="!nzShowExpand"
         ></button>
-      </ng-template>
-      <ng-container *ngIf="nzExpandIcon; else rowExpand">
-        <ng-template [ngTemplateOutlet]="nzExpandIcon"></ng-template>
-      </ng-container>
-    </ng-container>
-    <label
-      nz-checkbox
-      *ngIf="nzShowCheckbox"
-      [nzDisabled]="nzDisabled"
-      [ngModel]="nzChecked"
-      [nzIndeterminate]="nzIndeterminate"
-      [attr.aria-label]="nzLabel"
-      (ngModelChange)="onCheckedChange($event)"
-    ></label>
-    <label
-      nz-radio
-      *ngIf="nzShowRadio"
-      [nzDisabled]="nzDisabled"
-      [ngModel]="nzChecked"
-      [attr.aria-label]="nzLabel"
-      (ngModelChange)="onCheckedChange($event)"
-    ></label>
+      }
+    }
+    @if (nzShowCheckbox) {
+      <label
+        nz-checkbox
+        [nzDisabled]="nzDisabled"
+        [ngModel]="nzChecked"
+        [nzIndeterminate]="nzIndeterminate"
+        [attr.aria-label]="nzLabel"
+        (ngModelChange)="onCheckedChange($event)"
+      ></label>
+    } @else if (nzShowRadio) {
+      <label
+        nz-radio
+        [nzDisabled]="nzDisabled"
+        [ngModel]="nzChecked"
+        [attr.aria-label]="nzLabel"
+        (ngModelChange)="onCheckedChange($event)"
+      ></label>
+    }
     <ng-content></ng-content>
   `,
   host: {
     '[class.ant-table-cell-with-append]': `nzShowExpand || nzIndentSize > 0`,
     '[class.ant-table-selection-column]': `nzShowCheckbox || nzShowRadio`
   },
-  imports: [
-    NzRowIndentDirective,
-    NzRowExpandButtonDirective,
-    NgIf,
-    NgTemplateOutlet,
-    NzCheckboxModule,
-    FormsModule,
+  imports: [NzRowIndentDirective, NzRowExpandButtonDirective, NgTemplateOutlet, NzCheckboxModule, FormsModule,
     NzRadioComponent,
-    NzRadioGroupComponent
-  ],
+    NzRadioGroupComponent],
   standalone: true
 })
 export class NzTdAddOnComponent implements OnChanges {
@@ -94,10 +83,10 @@
   @Input() nzIndeterminate = false;
   @Input() nzLabel: string | null = null;
   @Input() nzIndentSize = 0;
-  @Input() @InputBoolean() nzShowExpand = false;
-  @Input() @InputBoolean() nzShowCheckbox = false;
-  @Input() @InputBoolean() nzShowRadio = false;
-  @Input() @InputBoolean() nzExpand = false;
+  @Input({ transform: booleanAttribute }) nzShowExpand = false;
+  @Input({ transform: booleanAttribute }) nzShowCheckbox = false;
+  @Input({ transform: booleanAttribute }) nzShowRadio = false;
+  @Input({ transform: booleanAttribute }) nzExpand = false;
   @Input() nzExpandIcon: TemplateRef<void> | null = null;
   @Output() readonly nzCheckedChange = new EventEmitter<boolean>();
   @Output() readonly nzExpandChange = new EventEmitter<boolean>();
@@ -130,7 +119,7 @@
       if (this.nzRowSelectionType === 'checkbox') {
         this.nzShowCheckbox = true;
       } else {
         this.nzShowRadio = true;
       }
     }
   }

components/table/src/cell/th-selection.component.ts

@@ -47,13 +47,13 @@
 })
 export class NzThSelectionComponent implements OnChanges {
   @Input() nzSelections: Array<{ text: string; onSelect(...args: NzSafeAny[]): NzSafeAny }> = [];
-  @Input() nzChecked = false;
-  @Input() nzRowSelectionType: NzRowSelectionType = 'checkbox';
-  @Input() nzDisabled = false;
+  @Input({ transform: booleanAttribute }) nzChecked = false;
+  @Input({ transform: booleanAttribute }) nzDisabled = false;
   @Input() nzIndeterminate = false;
   @Input() nzLabel: string | null = null;
   @Input({ transform: booleanAttribute }) nzShowCheckbox = false;
   @Input({ transform: booleanAttribute }) nzShowRowSelection = false;
+  @Input() nzRowSelectionType: NzRowSelectionType = 'checkbox';
   @Output() readonly nzCheckedChange = new EventEmitter<boolean>();
 
   private isNzShowExpandChanged = false;