From 9b866bc11f5396bbd8e03d27f1f8b4d44c448b18 Mon Sep 17 00:00:00 2001
From: Nicolas Frizzarin <nicolas.frizzarin54@gmail.com>
Date: Tue, 2 Jan 2024 11:18:37 +0100
Subject: [PATCH] refactor(module:date-picker): refactor control flow (#8322)

---
 .../date-picker/calendar-footer.component.ts  |  98 +++++++++------
 .../date-picker/date-picker.component.spec.ts | 115 +++++++++--------
 .../date-picker/date-picker.component.ts      |  83 ++++++------
 .../date-picker/date-range-popup.component.ts |  80 ++++++------
 .../date-picker/inner-popup.component.ts      |  47 ++++---
 .../lib/abstract-panel-header.html            |   4 +-
 .../date-picker/lib/abstract-table.html       | 118 +++++++++---------
 components/date-picker/lib/abstract-table.ts  |  11 +-
 .../date-picker/lib/date-table.component.ts   |  10 +-
 components/date-picker/lib/interface.ts       |   2 +
 .../month-picker.component.spec.ts            |  72 +++++------
 .../range-picker.component.spec.ts            | 108 ++++++++--------
 .../date-picker/week-picker.component.spec.ts |  12 +-
 .../date-picker/year-picker.component.spec.ts |  72 +++++------
 14 files changed, 426 insertions(+), 406 deletions(-)

diff --git a/components/date-picker/calendar-footer.component.ts b/components/date-picker/calendar-footer.component.ts
index 108aa4b4de..2982ca4f53 100644
--- a/components/date-picker/calendar-footer.component.ts
+++ b/components/date-picker/calendar-footer.component.ts
@@ -3,7 +3,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { NgIf, NgSwitch, NgSwitchCase, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -33,48 +33,58 @@ import { PREFIX_CLASS } from './util';
   exportAs: 'calendarFooter',
   template: `
     <div class="{{ prefixCls }}-footer">
-      <div *ngIf="extraFooter" class="{{ prefixCls }}-footer-extra">
-        <ng-container [ngSwitch]="true">
-          <ng-container *ngSwitchCase="isTemplateRef(extraFooter)">
-            <ng-container *ngTemplateOutlet="$any(extraFooter)"></ng-container>
-          </ng-container>
-          <ng-container *ngSwitchCase="isNonEmptyString(extraFooter)">
+      @if (extraFooter) {
+        <div class="{{ prefixCls }}-footer-extra">
+          @if (isExtraFooterTemplateRef) {
+            <ng-container *ngTemplateOutlet="$any(extraFooter)" />
+          }
+          @if (isExtraFooterNonEmptyString) {
             <span [innerHTML]="extraFooter"></span>
-          </ng-container>
-        </ng-container>
-      </div>
-      <a
-        *ngIf="showToday"
-        class="{{ prefixCls }}-today-btn {{ isTodayDisabled ? prefixCls + '-today-btn-disabled' : '' }}"
-        role="button"
-        (click)="isTodayDisabled ? null : onClickToday()"
-        title="{{ todayTitle }}"
-      >
-        {{ locale.today }}
-      </a>
-      <ul *ngIf="hasTimePicker || rangeQuickSelector" class="{{ prefixCls }}-ranges">
-        <ng-container *ngTemplateOutlet="rangeQuickSelector"></ng-container>
-        <li *ngIf="showNow" class="{{ prefixCls }}-now">
-          <a class="{{ prefixCls }}-now-btn" (click)="isTodayDisabled ? null : onClickToday()">
-            {{ locale.now }}
-          </a>
-        </li>
-        <li *ngIf="hasTimePicker" class="{{ prefixCls }}-ok">
-          <button
-            nz-button
-            type="button"
-            nzType="primary"
-            nzSize="small"
-            [disabled]="okDisabled"
-            (click)="okDisabled ? null : clickOk.emit()"
-          >
-            {{ locale.ok }}
-          </button>
-        </li>
-      </ul>
+          }
+        </div>
+      }
+
+      @if (showToday) {
+        <a
+          class="{{ prefixCls }}-today-btn {{ isTodayDisabled ? prefixCls + '-today-btn-disabled' : '' }}"
+          role="button"
+          (click)="isTodayDisabled ? null : onClickToday()"
+          title="{{ todayTitle }}"
+        >
+          {{ locale.today }}
+        </a>
+      }
+
+      @if (hasTimePicker || rangeQuickSelector) {
+        <ul class="{{ prefixCls }}-ranges">
+          <ng-container *ngTemplateOutlet="rangeQuickSelector" />
+          @if (showNow) {
+            <li class="{{ prefixCls }}-now">
+              <a class="{{ prefixCls }}-now-btn" (click)="isTodayDisabled ? null : onClickToday()">
+                {{ locale.now }}
+              </a>
+            </li>
+          }
+
+          @if (hasTimePicker) {
+            <li class="{{ prefixCls }}-ok">
+              <button
+                nz-button
+                type="button"
+                nzType="primary"
+                nzSize="small"
+                [disabled]="okDisabled"
+                (click)="okDisabled ? null : clickOk.emit()"
+              >
+                {{ locale.ok }}
+              </button>
+            </li>
+          }
+        </ul>
+      }
     </div>
   `,
-  imports: [NgIf, NgSwitch, NgSwitchCase, NgTemplateOutlet, NzButtonModule],
+  imports: [NgTemplateOutlet, NzButtonModule],
   standalone: true
 })
 export class CalendarFooterComponent implements OnChanges {
@@ -116,4 +126,12 @@ export class CalendarFooterComponent implements OnChanges {
     const now: CandyDate = new CandyDate();
     this.clickToday.emit(now.clone()); // To prevent the "now" being modified from outside, we use clone
   }
+
+  get isExtraFooterTemplateRef(): boolean {
+    return isTemplateRef(this.extraFooter);
+  }
+
+  get isExtraFooterNonEmptyString(): boolean {
+    return isNonEmptyString(this.extraFooter);
+  }
 }
diff --git a/components/date-picker/date-picker.component.spec.ts b/components/date-picker/date-picker.component.spec.ts
index febe10f1ee..dea35af55a 100644
--- a/components/date-picker/date-picker.component.spec.ts
+++ b/components/date-picker/date-picker.component.spec.ts
@@ -4,7 +4,7 @@ import { OverlayContainer } from '@angular/cdk/overlay';
 import { registerLocaleData } from '@angular/common';
 import zh from '@angular/common/locales/zh';
 import { ApplicationRef, Component, DebugElement, TemplateRef, ViewChild } from '@angular/core';
-import { ComponentFixture, TestBed, fakeAsync, flush, inject, tick } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, flush, inject, TestBed, tick } from '@angular/core/testing';
 import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -1410,63 +1410,62 @@ describe('in form', () => {
 
 @Component({
   template: `
-    <ng-container [ngSwitch]="useSuite">
-      <!-- Suite 1 -->
-      <nz-date-picker
-        *ngSwitchCase="1"
-        [nzAllowClear]="nzAllowClear"
-        [nzAutoFocus]="nzAutoFocus"
-        [nzDisabled]="nzDisabled"
-        [nzInputReadOnly]="nzInputReadOnly"
-        [nzDisabledDate]="nzDisabledDate"
-        [nzFormat]="nzFormat"
-        [nzLocale]="nzLocale"
-        [nzPlaceHolder]="nzPlaceHolder"
-        [nzPopupStyle]="nzPopupStyle"
-        [nzDropdownClassName]="nzDropdownClassName"
-        [nzSize]="nzSize"
-        (nzOnOpenChange)="nzOnOpenChange($event)"
-        [ngModel]="nzValue"
-        (ngModelChange)="nzOnChange($event)"
-        [nzDefaultPickerValue]="nzDefaultPickerValue"
-        [nzDateRender]="nzDateRender"
-        [nzDisabledTime]="nzDisabledTime"
-        [nzRenderExtraFooter]="nzRenderExtraFooter"
-        [nzShowToday]="nzShowToday"
-        [nzShowNow]="nzShowNow"
-        [nzMode]="nzMode"
-        (nzOnPanelChange)="nzOnPanelChange($event)"
-        (nzOnCalendarChange)="nzOnCalendarChange($event)"
-        [nzShowTime]="nzShowTime"
-        (nzOnOk)="nzOnOk($event)"
-        [nzSuffixIcon]="nzSuffixIcon"
-        [nzBorderless]="nzBorderless"
-        [nzInline]="nzInline"
-        [nzBackdrop]="nzBackdrop"
-        [nzPlacement]="nzPlacement"
-        [nzShowWeekNumber]="nzShowWeekNumber"
-      ></nz-date-picker>
-      <ng-template #tplDateRender let-current>
-        <div [class.test-first-day]="current.getDate() === 1">{{ current.getDate() }}</div>
-      </ng-template>
-      <ng-template #tplExtraFooter>TEST_EXTRA_FOOTER</ng-template>
-
-      <!-- Suite 2 -->
-      <!-- use another picker to avoid nzOpen's side-effects because nzOpen acts as "true" if used -->
-      <nz-date-picker *ngSwitchCase="2" [nzOpen]="nzOpen" (nzOnOpenChange)="nzOnOpenChange($event)"></nz-date-picker>
-
-      <!-- Suite 3 -->
-      <nz-date-picker *ngSwitchCase="3" nzOpen [(ngModel)]="modelValue"></nz-date-picker>
-
-      <!-- Suite 4 -->
-      <nz-date-picker *ngSwitchCase="4" [formControl]="control" [nzDisabled]="nzDisabled"></nz-date-picker>
-
-      <!-- Suite 5 -->
-      <ng-container *ngSwitchCase="5">
-        <nz-date-picker [ngModel]="firstValue" (ngModelChange)="nzOnChange($event)"></nz-date-picker>
-        <nz-date-picker [ngModel]="secondValue"></nz-date-picker>
-      </ng-container>
-    </ng-container>
+    @switch (useSuite) {
+      @case (1) {
+        <nz-date-picker
+          [nzAllowClear]="nzAllowClear"
+          [nzAutoFocus]="nzAutoFocus"
+          [nzDisabled]="nzDisabled"
+          [nzInputReadOnly]="nzInputReadOnly"
+          [nzDisabledDate]="nzDisabledDate"
+          [nzFormat]="nzFormat"
+          [nzLocale]="nzLocale"
+          [nzPlaceHolder]="nzPlaceHolder"
+          [nzPopupStyle]="nzPopupStyle"
+          [nzDropdownClassName]="nzDropdownClassName"
+          [nzSize]="nzSize"
+          (nzOnOpenChange)="nzOnOpenChange($event)"
+          [ngModel]="nzValue"
+          (ngModelChange)="nzOnChange($event)"
+          [nzDefaultPickerValue]="nzDefaultPickerValue"
+          [nzDateRender]="nzDateRender"
+          [nzDisabledTime]="nzDisabledTime"
+          [nzRenderExtraFooter]="nzRenderExtraFooter"
+          [nzShowToday]="nzShowToday"
+          [nzShowNow]="nzShowNow"
+          [nzMode]="nzMode"
+          (nzOnPanelChange)="nzOnPanelChange($event)"
+          (nzOnCalendarChange)="nzOnCalendarChange($event)"
+          [nzShowTime]="nzShowTime"
+          (nzOnOk)="nzOnOk($event)"
+          [nzSuffixIcon]="nzSuffixIcon"
+          [nzBorderless]="nzBorderless"
+          [nzInline]="nzInline"
+          [nzBackdrop]="nzBackdrop"
+          [nzPlacement]="nzPlacement"
+          [nzShowWeekNumber]="nzShowWeekNumber"
+        />
+      }
+      @case (2) {
+        <nz-date-picker [nzOpen]="nzOpen" (nzOnOpenChange)="nzOnOpenChange($event)"></nz-date-picker>
+      }
+      @case (3) {
+        <nz-date-picker nzOpen [(ngModel)]="modelValue"></nz-date-picker>
+      }
+      @case (4) {
+        <nz-date-picker [formControl]="control" [nzDisabled]="nzDisabled"></nz-date-picker>
+      }
+      @case (5) {
+        <ng-container>
+          <nz-date-picker [ngModel]="firstValue" (ngModelChange)="nzOnChange($event)"></nz-date-picker>
+          <nz-date-picker [ngModel]="secondValue"></nz-date-picker>
+        </ng-container>
+      }
+    }
+    <ng-template #tplDateRender let-current>
+      <div [class.test-first-day]="current.getDate() === 1">{{ current.getDate() }}</div>
+    </ng-template>
+    <ng-template #tplExtraFooter>TEST_EXTRA_FOOTER</ng-template>
   `
 })
 class NzTestDatePickerComponent {
diff --git a/components/date-picker/date-picker.component.ts b/components/date-picker/date-picker.component.ts
index 5c8ab5f52e..5e41b84655 100644
--- a/components/date-picker/date-picker.component.ts
+++ b/components/date-picker/date-picker.component.ts
@@ -14,7 +14,7 @@ import {
   VerticalConnectionPos
 } from '@angular/cdk/overlay';
 import { Platform } from '@angular/cdk/platform';
-import { DOCUMENT, NgIf, NgStyle, NgTemplateOutlet } from '@angular/common';
+import { DOCUMENT, NgStyle, NgTemplateOutlet } from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -98,48 +98,49 @@ export type NzPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
   selector: 'nz-date-picker,nz-week-picker,nz-month-picker,nz-year-picker,nz-range-picker',
   exportAs: 'nzDatePicker',
   template: `
-    <ng-container *ngIf="!nzInline; else inlineMode">
-      <!-- Content of single picker -->
-      <div *ngIf="!isRange" class="{{ prefixCls }}-input">
-        <input
-          #pickerInput
-          [attr.id]="nzId"
-          [class.ant-input-disabled]="nzDisabled"
-          [disabled]="nzDisabled"
-          [readOnly]="nzInputReadOnly"
-          [(ngModel)]="inputValue"
-          placeholder="{{ getPlaceholder() }}"
-          [size]="inputSize"
-          autocomplete="off"
-          (focus)="onFocus($event)"
-          (focusout)="onFocusout($event)"
-          (ngModelChange)="onInputChange($event)"
-          (keyup.enter)="onKeyupEnter($event)"
-        />
-        <ng-container *ngTemplateOutlet="tplRightRest"></ng-container>
-      </div>
-
-      <!-- Content of range picker -->
-      <ng-container *ngIf="isRange">
+    @if (!nzInline) {
+      @if (!isRange) {
         <div class="{{ prefixCls }}-input">
-          <ng-container *ngTemplateOutlet="tplRangeInput; context: { partType: 'left' }"></ng-container>
+          <input
+            #pickerInput
+            [attr.id]="nzId"
+            [class.ant-input-disabled]="nzDisabled"
+            [disabled]="nzDisabled"
+            [readOnly]="nzInputReadOnly"
+            [(ngModel)]="inputValue"
+            placeholder="{{ getPlaceholder() }}"
+            [size]="inputSize"
+            autocomplete="off"
+            (focus)="onFocus($event)"
+            (focusout)="onFocusout($event)"
+            (ngModelChange)="onInputChange($event)"
+            (keyup.enter)="onKeyupEnter($event)"
+          />
+          <ng-container *ngTemplateOutlet="tplRightRest" />
+        </div>
+      } @else {
+        <div class="{{ prefixCls }}-input">
+          <ng-container *ngTemplateOutlet="tplRangeInput; context: { partType: 'left' }" />
         </div>
         <div #separatorElement class="{{ prefixCls }}-range-separator">
           <span class="{{ prefixCls }}-separator">
             <ng-container *nzStringTemplateOutlet="nzSeparator; let separator">
-              <ng-container *ngIf="nzSeparator; else defaultSeparator">{{ nzSeparator }}</ng-container>
-              <ng-template #defaultSeparator>
+              @if (nzSeparator) {
+                {{ nzSeparator }}
+              } @else {
                 <span nz-icon nzType="swap-right" nzTheme="outline"></span>
-              </ng-template>
+              }
             </ng-container>
           </span>
         </div>
         <div class="{{ prefixCls }}-input">
-          <ng-container *ngTemplateOutlet="tplRangeInput; context: { partType: 'right' }"></ng-container>
+          <ng-container *ngTemplateOutlet="tplRangeInput; context: { partType: 'right' }" />
         </div>
-        <ng-container *ngTemplateOutlet="tplRightRest"></ng-container>
-      </ng-container>
-    </ng-container>
+        <ng-container *ngTemplateOutlet="tplRightRest" />
+      }
+    } @else {
+      <ng-template [ngTemplateOutlet]="inlineMode" />
+    }
     <!-- Input for Range ONLY -->
     <ng-template #tplRangeInput let-partType="partType">
       <input
@@ -162,14 +163,19 @@ export type NzPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
     <!-- Right operator icons -->
     <ng-template #tplRightRest>
       <div class="{{ prefixCls }}-active-bar" [ngStyle]="activeBarStyle"></div>
-      <span *ngIf="showClear()" class="{{ prefixCls }}-clear" (click)="onClickClear($event)">
-        <span nz-icon nzType="close-circle" nzTheme="fill"></span>
-      </span>
+      @if (showClear) {
+        <span class="{{ prefixCls }}-clear" (click)="onClickClear($event)">
+          <span nz-icon nzType="close-circle" nzTheme="fill"></span>
+        </span>
+      }
+
       <span class="{{ prefixCls }}-suffix">
         <ng-container *nzStringTemplateOutlet="nzSuffixIcon; let suffixIcon">
           <span nz-icon [nzType]="suffixIcon"></span>
         </ng-container>
-        <nz-form-item-feedback-icon *ngIf="hasFeedback && !!status" [status]="status"></nz-form-item-feedback-icon>
+        @if (hasFeedback && !!status) {
+          <nz-form-item-feedback-icon [status]="status" />
+        }
       </span>
     </ng-template>
 
@@ -205,7 +211,7 @@ export type NzPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
           [ranges]="nzRanges"
           [dir]="dir"
           (resultOk)="onResultOk()"
-        ></date-range-popup>
+        />
       </div>
     </ng-template>
 
@@ -254,7 +260,6 @@ export type NzPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
   ],
   animations: [slideMotion],
   imports: [
-    NgIf,
     FormsModule,
     NgTemplateOutlet,
     NzOutletModule,
@@ -482,7 +487,7 @@ export class NzDatePickerComponent implements OnInit, OnChanges, AfterViewInit,
     }
   }
 
-  showClear(): boolean {
+  get showClear(): boolean {
     return !this.nzDisabled && !this.isEmptyValue(this.datePickerService.value) && this.nzAllowClear;
   }
 
diff --git a/components/date-picker/date-range-popup.component.ts b/components/date-picker/date-range-popup.component.ts
index 755c9ff265..4e0f348578 100644
--- a/components/date-picker/date-range-popup.component.ts
+++ b/components/date-picker/date-range-popup.component.ts
@@ -4,7 +4,7 @@
  */
 
 import { Direction } from '@angular/cdk/bidi';
-import { NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -57,26 +57,22 @@ import { getTimeConfig, isAllowedDate, PREFIX_CLASS } from './util';
   selector: 'date-range-popup',
   exportAs: 'dateRangePopup',
   template: `
-    <ng-container *ngIf="isRange; else singlePanel">
+    @if (isRange) {
       <div class="{{ prefixCls }}-range-wrapper {{ prefixCls }}-date-range-wrapper">
         <div class="{{ prefixCls }}-range-arrow" [style]="arrowPosition"></div>
         <div class="{{ prefixCls }}-panel-container {{ showWeek ? prefixCls + '-week-number' : '' }}">
           <div class="{{ prefixCls }}-panels">
-            <ng-container *ngIf="hasTimePicker; else noTimePicker">
-              <ng-container
-                *ngTemplateOutlet="tplInnerPopup; context: { partType: datePickerService.activeInput }"
-              ></ng-container>
-            </ng-container>
-            <ng-template #noTimePicker>
-              <ng-container *ngTemplateOutlet="tplInnerPopup; context: { partType: 'left' }"></ng-container>
-              <ng-container *ngTemplateOutlet="tplInnerPopup; context: { partType: 'right' }"></ng-container>
-            </ng-template>
+            @if (hasTimePicker) {
+              <ng-container *ngTemplateOutlet="tplInnerPopup; context: { partType: datePickerService.activeInput }" />
+            } @else {
+              <ng-container *ngTemplateOutlet="tplInnerPopup; context: { partType: 'left' }" />
+              <ng-container *ngTemplateOutlet="tplInnerPopup; context: { partType: 'right' }" />
+            }
           </div>
-          <ng-container *ngTemplateOutlet="tplFooter"></ng-container>
+          <ng-container *ngTemplateOutlet="tplFooter" />
         </div>
       </div>
-    </ng-container>
-    <ng-template #singlePanel>
+    } @else {
       <div
         class="{{ prefixCls }}-panel-container {{ showWeek ? prefixCls + '-week-number' : '' }} {{
           hasTimePicker ? prefixCls + '-time' : ''
@@ -84,11 +80,11 @@ import { getTimeConfig, isAllowedDate, PREFIX_CLASS } from './util';
       >
         <div class="{{ prefixCls }}-panel" [class.ant-picker-panel-rtl]="dir === 'rtl'" tabindex="-1">
           <!-- Single ONLY -->
-          <ng-container *ngTemplateOutlet="tplInnerPopup"></ng-container>
-          <ng-container *ngTemplateOutlet="tplFooter"></ng-container>
+          <ng-container *ngTemplateOutlet="tplInnerPopup" />
+          <ng-container *ngTemplateOutlet="tplFooter" />
         </div>
       </div>
-    </ng-template>
+    }
 
     <ng-template #tplInnerPopup let-partType="partType">
       <div class="{{ prefixCls }}-panel" [class.ant-picker-panel-rtl]="dir === 'rtl'">
@@ -112,40 +108,42 @@ import { getTimeConfig, isAllowedDate, PREFIX_CLASS } from './util';
           (selectDate)="changeValueFromSelect($event, !showTime)"
           (selectTime)="onSelectTime($event, partType)"
           (headerChange)="onActiveDateChange($event, partType)"
-        ></inner-popup>
+        />
       </div>
     </ng-template>
 
     <ng-template #tplFooter>
-      <calendar-footer
-        *ngIf="hasFooter"
-        [locale]="locale!"
-        [isRange]="isRange"
-        [showToday]="showToday"
-        [showNow]="showNow"
-        [hasTimePicker]="hasTimePicker"
-        [okDisabled]="!isAllowed($any(datePickerService?.value))"
-        [extraFooter]="extraFooter"
-        [rangeQuickSelector]="ranges ? tplRangeQuickSelector : null"
-        (clickOk)="onClickOk()"
-        (clickToday)="onClickToday($event)"
-      ></calendar-footer>
+      @if (hasFooter) {
+        <calendar-footer
+          [locale]="locale!"
+          [isRange]="isRange"
+          [showToday]="showToday"
+          [showNow]="showNow"
+          [hasTimePicker]="hasTimePicker"
+          [okDisabled]="!isAllowed($any(datePickerService?.value))"
+          [extraFooter]="extraFooter"
+          [rangeQuickSelector]="ranges ? tplRangeQuickSelector : null"
+          (clickOk)="onClickOk()"
+          (clickToday)="onClickToday($event)"
+        />
+      }
     </ng-template>
 
     <!-- Range ONLY: Range Quick Selector -->
     <ng-template #tplRangeQuickSelector>
-      <li
-        *ngFor="let name of getObjectKeys(ranges)"
-        class="{{ prefixCls }}-preset"
-        (click)="onClickPresetRange(ranges![name])"
-        (mouseenter)="onHoverPresetRange(ranges![name])"
-        (mouseleave)="onPresetRangeMouseLeave()"
-      >
-        <span class="ant-tag ant-tag-blue">{{ name }}</span>
-      </li>
+      @for (name of getObjectKeys(ranges); track name) {
+        <li
+          class="{{ prefixCls }}-preset"
+          (click)="onClickPresetRange(ranges![name])"
+          (mouseenter)="onHoverPresetRange(ranges![name])"
+          (mouseleave)="onPresetRangeMouseLeave()"
+        >
+          <span class="ant-tag ant-tag-blue">{{ name }}</span>
+        </li>
+      }
     </ng-template>
   `,
-  imports: [InnerPopupComponent, NgTemplateOutlet, NgIf, CalendarFooterComponent, NgForOf],
+  imports: [InnerPopupComponent, NgTemplateOutlet, CalendarFooterComponent],
   standalone: true
 })
 export class DateRangePopupComponent implements OnInit, OnChanges, OnDestroy {
diff --git a/components/date-picker/inner-popup.component.ts b/components/date-picker/inner-popup.component.ts
index b24d042bfc..6c862c5be2 100644
--- a/components/date-picker/inner-popup.component.ts
+++ b/components/date-picker/inner-popup.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, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -35,8 +34,8 @@ import { PREFIX_CLASS } from './util';
   template: `
     <div [class.ant-picker-datetime-panel]="showTimePicker">
       <div class="{{ prefixCls }}-{{ panelMode }}-panel">
-        <ng-container [ngSwitch]="panelMode">
-          <ng-container *ngSwitchCase="'decade'">
+        @switch (panelMode) {
+          @case ('decade') {
             <decade-header
               [(value)]="activeDate"
               [locale]="locale"
@@ -46,7 +45,7 @@ import { PREFIX_CLASS } from './util';
               [showPreBtn]="false"
               (panelModeChange)="panelModeChange.emit($event)"
               (valueChange)="headerChange.emit($event)"
-            ></decade-header>
+            />
             <div class="{{ prefixCls }}-body">
               <decade-table
                 [activeDate]="activeDate"
@@ -54,10 +53,10 @@ import { PREFIX_CLASS } from './util';
                 [locale]="locale"
                 (valueChange)="onChooseDecade($event)"
                 [disabledDate]="disabledDate"
-              ></decade-table>
+              />
             </div>
-          </ng-container>
-          <ng-container *ngSwitchCase="'year'">
+          }
+          @case ('year') {
             <year-header
               [(value)]="activeDate"
               [locale]="locale"
@@ -67,7 +66,7 @@ import { PREFIX_CLASS } from './util';
               [showPreBtn]="false"
               (panelModeChange)="panelModeChange.emit($event)"
               (valueChange)="headerChange.emit($event)"
-            ></year-header>
+            />
             <div class="{{ prefixCls }}-body">
               <year-table
                 [activeDate]="activeDate"
@@ -78,10 +77,10 @@ import { PREFIX_CLASS } from './util';
                 [hoverValue]="hoverValue"
                 (valueChange)="onChooseYear($event)"
                 (cellHover)="cellHover.emit($event)"
-              ></year-table>
+              />
             </div>
-          </ng-container>
-          <ng-container *ngSwitchCase="'month'">
+          }
+          @case ('month') {
             <month-header
               [(value)]="activeDate"
               [locale]="locale"
@@ -91,7 +90,7 @@ import { PREFIX_CLASS } from './util';
               [showPreBtn]="false"
               (panelModeChange)="panelModeChange.emit($event)"
               (valueChange)="headerChange.emit($event)"
-            ></month-header>
+            />
             <div class="{{ prefixCls }}-body">
               <month-table
                 [value]="value"
@@ -102,11 +101,10 @@ import { PREFIX_CLASS } from './util';
                 [hoverValue]="hoverValue"
                 (valueChange)="onChooseMonth($event)"
                 (cellHover)="cellHover.emit($event)"
-              ></month-table>
+              />
             </div>
-          </ng-container>
-
-          <ng-container *ngSwitchDefault>
+          }
+          @default {
             <date-header
               [(value)]="activeDate"
               [locale]="locale"
@@ -118,7 +116,7 @@ import { PREFIX_CLASS } from './util';
               [showNextBtn]="panelMode === 'week' ? enablePrevNext('next', 'week') : enablePrevNext('next', 'date')"
               (panelModeChange)="panelModeChange.emit($event)"
               (valueChange)="headerChange.emit($event)"
-            ></date-header>
+            />
             <div class="{{ prefixCls }}-body">
               <date-table
                 [locale]="locale"
@@ -132,12 +130,12 @@ import { PREFIX_CLASS } from './util';
                 [canSelectWeek]="panelMode === 'week'"
                 (valueChange)="onSelectDate($event)"
                 (cellHover)="cellHover.emit($event)"
-              ></date-table>
+              />
             </div>
-          </ng-container>
-        </ng-container>
+          }
+        }
       </div>
-      <ng-container *ngIf="showTimePicker && timeOptions">
+      @if (showTimePicker && timeOptions) {
         <nz-time-picker-panel
           [nzInDatePicker]="true"
           [ngModel]="value?.nativeDate"
@@ -153,12 +151,11 @@ import { PREFIX_CLASS } from './util';
           [nzDefaultOpenValue]="$any(timeOptions.nzDefaultOpenValue)"
           [nzUse12Hours]="!!timeOptions.nzUse12Hours"
           [nzAddOn]="$any(timeOptions.nzAddOn)"
-        ></nz-time-picker-panel>
-        <!-- use [opened] to trigger time panel 'initPosition()' -->
-      </ng-container>
+        />
+      }
     </div>
   `,
-  imports: [NgSwitch, NgSwitchCase, LibPackerModule, NgSwitchDefault, NgIf, NzTimePickerModule, FormsModule],
+  imports: [LibPackerModule, NzTimePickerModule, FormsModule],
   standalone: true
 })
 export class InnerPopupComponent implements OnChanges {
diff --git a/components/date-picker/lib/abstract-panel-header.html b/components/date-picker/lib/abstract-panel-header.html
index fefbdc641a..76fa78098c 100644
--- a/components/date-picker/lib/abstract-panel-header.html
+++ b/components/date-picker/lib/abstract-panel-header.html
@@ -23,7 +23,7 @@
   </button>
 
   <div class="{{ prefixCls }}-view">
-    <ng-container *ngFor="let selector of selectors">
+    @for(selector of selectors; track selector) {
       <button
         class="{{ selector.className }}"
         role="button"
@@ -33,7 +33,7 @@
       >
         {{ selector.label }}
       </button>
-    </ng-container>
+    }
   </div>
   <button
     [style.visibility]="showNextBtn ? 'visible' : 'hidden'"
diff --git a/components/date-picker/lib/abstract-table.html b/components/date-picker/lib/abstract-table.html
index 976c72172b..af6b7a0205 100644
--- a/components/date-picker/lib/abstract-table.html
+++ b/components/date-picker/lib/abstract-table.html
@@ -1,64 +1,68 @@
 <table class="ant-picker-content" cellspacing="0" role="grid">
-  <thead *ngIf="headRow && headRow.length > 0">
-    <tr role="row">
-      <th *ngIf="showWeek" role="columnheader"></th>
-      <th *ngFor="let cell of headRow" role="columnheader" title="{{ cell.title }}"> {{ cell.content }} </th>
-    </tr>
-  </thead>
+  @if(headRow && headRow.length > 0) {
+    <thead>
+      <tr role="row">
+        @if(showWeek) {
+          <th role="columnheader"></th>
+        }
+        @for(cell of headRow; track cell) {
+          <th role="columnheader" title="{{ cell.title }}"> {{ cell.content }} </th>
+        }
+      </tr>
+    </thead>
+  }
+
   <tbody>
-    <tr *ngFor="let row of bodyRows; trackBy: trackByBodyRow" [ngClass]="row.classMap!" role="row">
-      <td *ngIf="row.weekNum" role="gridcell" class="{{ prefixCls }}-cell-week"> {{ row.weekNum }} </td>
-      <td
-        *ngFor="let cell of row.dateCells; trackBy: trackByBodyColumn"
-        title="{{ cell.title }}"
-        role="gridcell"
-        [ngClass]="cell.classMap!"
-        (click)="cell.isDisabled ? null : cell.onClick()"
-        (mouseenter)="cell.onMouseEnter()"
-      >
-        <ng-container [ngSwitch]="prefixCls">
-          <ng-container *ngSwitchCase="'ant-picker'">
-            <ng-container [ngSwitch]="true">
-              <ng-container *ngSwitchCase="isTemplateRef(cell.cellRender)">
-                <!--           *ngSwitchCase not has type assertion support, the cellRender type here is TemplateRef -->
-                <ng-container
-                  *ngTemplateOutlet="$any(cell.cellRender); context: { $implicit: cell.value }"
-                ></ng-container>
-              </ng-container>
-              <ng-container *ngSwitchCase="isNonEmptyString(cell.cellRender)">
-                <span [innerHTML]="cell.cellRender"></span>
-              </ng-container>
-              <ng-container *ngSwitchDefault>
+    @for(row of bodyRows; track row.trackByIndex) {
+      <tr [ngClass]="row.classMap!" role="row">
+        @if(row.weekNum) {
+          <td role="gridcell" class="{{ prefixCls }}-cell-week"> {{ row.weekNum }} </td>
+        }
+        @for(cell of row.dateCells; track cell.trackByIndex) {
+          <td
+            title="{{ cell.title }}"
+            role="gridcell"
+            [ngClass]="cell.classMap!"
+            (click)="cell.isDisabled ? null : cell.onClick()"
+            (mouseenter)="cell.onMouseEnter()"
+          >
+            @switch (prefixCls) {
+              @case('ant-picker') {
+                @if(cell.isTemplateRef) {
+                  <ng-container *ngTemplateOutlet="$any(cell.cellRender); context: { $implicit: cell.value }" />
+                }@else if(cell.isNonEmptyString) {
+                  <span [innerHTML]="cell.cellRender"></span>
+                }@else {
+                  <div
+                    class="{{ prefixCls }}-cell-inner"
+                    [attr.aria-selected]="cell.isSelected"
+                    [attr.aria-disabled]="cell.isDisabled"
+                  >
+                    {{ cell.content }}
+                  </div>
+                }
+              }
+              @case('ant-picker-calendar') {
                 <div
-                  class="{{ prefixCls }}-cell-inner"
-                  [attr.aria-selected]="cell.isSelected"
-                  [attr.aria-disabled]="cell.isDisabled"
+                  class="{{ prefixCls }}-date ant-picker-cell-inner"
+                  [class.ant-picker-calendar-date-today]="cell.isToday"
                 >
-                  {{ cell.content }}
+                  @if(cell.fullCellRender) {
+                    <ng-container *ngTemplateOutlet="$any(cell.fullCellRender); context: { $implicit: cell.value }" />
+                  }@else() {
+                    <div class="{{ prefixCls }}-date-value">{{ cell.content }}</div>
+                    <div class="{{ prefixCls }}-date-content">
+                      <ng-container *ngTemplateOutlet="$any(cell.cellRender); context: { $implicit: cell.value }">
+                      </ng-container>
+                    </div>
+                  }
                 </div>
-              </ng-container>
-            </ng-container>
-          </ng-container>
-          <ng-container *ngSwitchCase="'ant-picker-calendar'">
-            <div
-              class="{{ prefixCls }}-date ant-picker-cell-inner"
-              [class.ant-picker-calendar-date-today]="cell.isToday"
-            >
-              <ng-container *ngIf="cell.fullCellRender; else defaultCell">
-                <ng-container *ngTemplateOutlet="$any(cell.fullCellRender); context: { $implicit: cell.value }">
-                </ng-container>
-              </ng-container>
-              <ng-template #defaultCell>
-                <div class="{{ prefixCls }}-date-value">{{ cell.content }}</div>
-                <div class="{{ prefixCls }}-date-content">
-                  <ng-container *ngTemplateOutlet="$any(cell.cellRender); context: { $implicit: cell.value }">
-                  </ng-container>
-                </div>
-              </ng-template>
-            </div>
-          </ng-container>
-        </ng-container>
-      </td>
-    </tr>
+              }
+            }
+          </td>
+        }
+
+      </tr>
+    }
   </tbody>
 </table>
diff --git a/components/date-picker/lib/abstract-table.ts b/components/date-picker/lib/abstract-table.ts
index 12451bf1a0..c893b41877 100644
--- a/components/date-picker/lib/abstract-table.ts
+++ b/components/date-picker/lib/abstract-table.ts
@@ -16,8 +16,7 @@ import {
 } from '@angular/core';
 
 import { CandyDate } from 'ng-zorro-antd/core/time';
-import { FunctionProp, NzSafeAny } from 'ng-zorro-antd/core/types';
-import { isNonEmptyString, isTemplateRef } from 'ng-zorro-antd/core/util';
+import { FunctionProp } from 'ng-zorro-antd/core/types';
 import { NzCalendarI18nInterface } from 'ng-zorro-antd/i18n';
 
 import { DateBodyRow, DateCell } from './interface';
@@ -25,8 +24,6 @@ import { DateBodyRow, DateCell } from './interface';
 @Directive()
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
 export abstract class AbstractTable implements OnInit, OnChanges {
-  isTemplateRef = isTemplateRef;
-  isNonEmptyString = isNonEmptyString;
   headRow: DateCell[] = [];
   bodyRows: DateBodyRow[] = [];
   MAX_ROW = 6;
@@ -54,13 +51,7 @@ export abstract class AbstractTable implements OnInit, OnChanges {
     }
   }
 
-  trackByBodyRow(_index: number, item: DateBodyRow): NzSafeAny {
-    return item.trackByIndex;
-  }
 
-  trackByBodyColumn(_index: number, item: DateCell): NzSafeAny {
-    return item.trackByIndex;
-  }
 
   hasRangeValue(): boolean {
     return this.selectedValue?.length > 0 || this.hoverValue?.length > 0;
diff --git a/components/date-picker/lib/date-table.component.ts b/components/date-picker/lib/date-table.component.ts
index 5c071998af..1ea7aa1a34 100644
--- a/components/date-picker/lib/date-table.component.ts
+++ b/components/date-picker/lib/date-table.component.ts
@@ -3,11 +3,11 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { NgClass, NgForOf, NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet } from '@angular/common';
+import { NgClass, NgSwitch, NgTemplateOutlet } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, ViewEncapsulation } from '@angular/core';
 
 import { CandyDate } from 'ng-zorro-antd/core/time';
-import { valueFunctionProp } from 'ng-zorro-antd/core/util';
+import { isNonEmptyString, isTemplateRef, valueFunctionProp } from 'ng-zorro-antd/core/util';
 import { DateHelperService, NzCalendarI18nInterface, NzI18nService } from 'ng-zorro-antd/i18n';
 
 import { AbstractTable } from './abstract-table';
@@ -22,7 +22,7 @@ import { transCompatFormat } from './util';
   exportAs: 'dateTable',
   templateUrl: './abstract-table.html',
   standalone: true,
-  imports: [NgIf, NgForOf, NgClass, NgSwitch, NgSwitchCase, NgTemplateOutlet, NgSwitchDefault]
+  imports: [NgClass, NgSwitch, NgTemplateOutlet]
 })
 export class DateTableComponent extends AbstractTable implements OnChanges, OnInit {
   @Input() override locale!: NzCalendarI18nInterface;
@@ -93,7 +93,7 @@ export class DateTableComponent extends AbstractTable implements OnChanges, OnIn
           fullCellRender: valueFunctionProp(this.fullCellRender!, date),
           content: `${date.getDate()}`,
           onClick: () => this.changeValueFromInside(date),
-          onMouseEnter: () => this.cellHover.emit(date)
+          onMouseEnter: () => this.cellHover.emit(date),
         };
 
         this.addCellProperty(cell, date);
@@ -116,6 +116,8 @@ export class DateTableComponent extends AbstractTable implements OnChanges, OnIn
   }
 
   addCellProperty(cell: DateCell, date: CandyDate): void {
+    cell.isTemplateRef = isTemplateRef(cell.cellRender);
+    cell.isNonEmptyString =  isNonEmptyString(cell.cellRender);
     if (this.hasRangeValue() && !this.canSelectWeek) {
       const [startHover, endHover] = this.hoverValue;
       const [startSelected, endSelected] = this.selectedValue;
diff --git a/components/date-picker/lib/interface.ts b/components/date-picker/lib/interface.ts
index b241c22ea4..aa9036bc6c 100644
--- a/components/date-picker/lib/interface.ts
+++ b/components/date-picker/lib/interface.ts
@@ -39,6 +39,8 @@ export interface DateCell {
   isRangeEndNearHover?: boolean;
   isFirstCellInPanel?: boolean;
   isLastCellInPanel?: boolean;
+  isTemplateRef ?: boolean;
+  isNonEmptyString ?: boolean;
 }
 
 export interface DateBodyRow {
diff --git a/components/date-picker/month-picker.component.spec.ts b/components/date-picker/month-picker.component.spec.ts
index f61c503c2d..5e62d97fa7 100644
--- a/components/date-picker/month-picker.component.spec.ts
+++ b/components/date-picker/month-picker.component.spec.ts
@@ -413,42 +413,42 @@ describe('NzMonthPickerComponent', () => {
 
 @Component({
   template: `
-    <ng-container [ngSwitch]="useSuite">
-      <!-- Suite 1 -->
-      <nz-date-picker
-        *ngSwitchCase="1"
-        nzMode="month"
-        [nzAllowClear]="nzAllowClear"
-        [nzAutoFocus]="nzAutoFocus"
-        [nzDisabled]="nzDisabled"
-        [nzDisabledDate]="nzDisabledDate"
-        [nzLocale]="nzLocale"
-        [nzPlaceHolder]="nzPlaceHolder"
-        [nzPopupStyle]="nzPopupStyle"
-        [nzDropdownClassName]="nzDropdownClassName"
-        [nzSize]="nzSize"
-        (nzOnOpenChange)="nzOnOpenChange($event)"
-        [ngModel]="nzValue"
-        (ngModelChange)="nzOnChange($event)"
-        [nzRenderExtraFooter]="nzRenderExtraFooter"
-      ></nz-date-picker>
-      <ng-template #tplExtraFooter>TEST_EXTRA_FOOTER</ng-template>
-
-      <!-- Suite 2 -->
-      <!-- use another picker to avoid nzOpen's side-effects beacuse nzOpen act as "true" if used -->
-      <nz-date-picker nzMode="month" *ngSwitchCase="2" [nzOpen]="nzOpen"></nz-date-picker>
-
-      <!-- Suite 3 -->
-      <nz-date-picker nzMode="month" *ngSwitchCase="3" nzOpen [(ngModel)]="modelValue"></nz-date-picker>
-
-      <!-- Suite 4 -->
-      <nz-input-group *ngSwitchCase="4" nzCompact>
-        <nz-date-picker nzMode="month" style="width: 200px;"></nz-date-picker>
-        <input nz-input type="text" style="width: 200px;" />
-      </nz-input-group>
-
-      <nz-month-picker *ngSwitchCase="5" nzOpen></nz-month-picker>
-    </ng-container>
+    <ng-template #tplExtraFooter>TEST_EXTRA_FOOTER</ng-template>
+    @switch (useSuite) {
+      @case (1) {
+        <nz-date-picker
+          nzMode="month"
+          [nzAllowClear]="nzAllowClear"
+          [nzAutoFocus]="nzAutoFocus"
+          [nzDisabled]="nzDisabled"
+          [nzDisabledDate]="nzDisabledDate"
+          [nzLocale]="nzLocale"
+          [nzPlaceHolder]="nzPlaceHolder"
+          [nzPopupStyle]="nzPopupStyle"
+          [nzDropdownClassName]="nzDropdownClassName"
+          [nzSize]="nzSize"
+          (nzOnOpenChange)="nzOnOpenChange($event)"
+          [ngModel]="nzValue"
+          (ngModelChange)="nzOnChange($event)"
+          [nzRenderExtraFooter]="nzRenderExtraFooter"
+        />
+      }
+      @case (2) {
+        <nz-date-picker nzMode="month" [nzOpen]="nzOpen" />
+      }
+      @case (3) {
+        <nz-date-picker nzMode="month" nzOpen [(ngModel)]="modelValue" />
+      }
+      @case (4) {
+        <nz-input-group nzCompact>
+          <nz-date-picker nzMode="month" style="width: 200px;" />
+          <input nz-input type="text" style="width: 200px;" />
+        </nz-input-group>
+      }
+      @case (5) {
+        <nz-month-picker nzOpen />
+      }
+    }
   `
 })
 class NzTestMonthPickerComponent {
diff --git a/components/date-picker/range-picker.component.spec.ts b/components/date-picker/range-picker.component.spec.ts
index 29c0304a20..84b9ed9589 100644
--- a/components/date-picker/range-picker.component.spec.ts
+++ b/components/date-picker/range-picker.component.spec.ts
@@ -1197,60 +1197,60 @@ describe('NzRangePickerComponent', () => {
 
 @Component({
   template: `
-    <ng-container [ngSwitch]="useSuite">
-      <!-- Suite 1 -->
-      <nz-range-picker
-        *ngSwitchCase="1"
-        [nzAllowClear]="nzAllowClear"
-        [nzAutoFocus]="nzAutoFocus"
-        [nzDisabled]="nzDisabled"
-        [nzDisabledDate]="nzDisabledDate"
-        [nzLocale]="nzLocale"
-        [nzPlaceHolder]="nzPlaceHolder"
-        [nzPopupStyle]="nzPopupStyle"
-        [nzDropdownClassName]="nzDropdownClassName"
-        [nzSize]="nzSize"
-        [nzSeparator]="nzSeparator"
-        (nzOnOpenChange)="nzOnOpenChange($event)"
-        [(ngModel)]="modelValue"
-        (ngModelChange)="modelValueChange($event)"
-        [nzDateRender]="nzDateRender"
-        [nzDisabledTime]="nzDisabledTime"
-        [nzRenderExtraFooter]="nzRenderExtraFooter"
-        [nzShowToday]="nzShowToday"
-        [nzShowNow]="nzShowNow"
-        [nzMode]="nzMode"
-        [nzRanges]="nzRanges"
-        [nzDefaultPickerValue]="nzDefaultPickerValue"
-        [nzInline]="nzInline"
-        (nzOnPanelChange)="nzOnPanelChange($event)"
-        (nzOnCalendarChange)="nzOnCalendarChange($event)"
-        [nzShowTime]="nzShowTime"
-        (nzOnOk)="nzOnOk($event)"
-      ></nz-range-picker>
-      <ng-template #tplDateRender let-current>
-        <div [class.test-first-day]="current.getDate() === 1">{{ current.getDate() }}</div>
-      </ng-template>
-      <ng-template #tplExtraFooter>TEST_EXTRA_FOOTER</ng-template>
-
-      <!-- Suite 2 -->
-      <!-- use another picker to avoid nzOpen's side-effects because nzOpen act as "true" if used -->
-      <nz-range-picker *ngSwitchCase="2" [nzOpen]="nzOpen"></nz-range-picker>
-
-      <!-- Suite 3 -->
-      <nz-range-picker *ngSwitchCase="3" nzOpen [(ngModel)]="modelValue"></nz-range-picker>
-
-      <!-- Suite 4 -->
-      <ng-container *ngSwitchCase="4">
-        <nz-range-picker [(ngModel)]="modelValue"></nz-range-picker>
-        <nz-date-picker [ngModel]="singleValue"></nz-date-picker>
-      </ng-container>
-
-      <nz-range-picker *ngSwitchCase="5" nzOpen></nz-range-picker>
-
-      <nz-range-picker *ngSwitchCase="6" [nzSeparator]="separatorTemplate"></nz-range-picker>
-      <ng-template #separatorTemplate>TEST_SEPARATOR_REF</ng-template>
-    </ng-container>
+    <ng-template #tplDateRender let-current>
+      <div [class.test-first-day]="current.getDate() === 1">{{ current.getDate() }}</div>
+    </ng-template>
+    <ng-template #tplExtraFooter>TEST_EXTRA_FOOTER</ng-template>
+    <ng-template #separatorTemplate>TEST_SEPARATOR_REF</ng-template>
+
+    @switch (useSuite) {
+      @case (1) {
+        <nz-range-picker
+          [nzAllowClear]="nzAllowClear"
+          [nzAutoFocus]="nzAutoFocus"
+          [nzDisabled]="nzDisabled"
+          [nzDisabledDate]="nzDisabledDate"
+          [nzLocale]="nzLocale"
+          [nzPlaceHolder]="nzPlaceHolder"
+          [nzPopupStyle]="nzPopupStyle"
+          [nzDropdownClassName]="nzDropdownClassName"
+          [nzSize]="nzSize"
+          [nzSeparator]="nzSeparator"
+          (nzOnOpenChange)="nzOnOpenChange($event)"
+          [(ngModel)]="modelValue"
+          (ngModelChange)="modelValueChange($event)"
+          [nzDateRender]="nzDateRender"
+          [nzDisabledTime]="nzDisabledTime"
+          [nzRenderExtraFooter]="nzRenderExtraFooter"
+          [nzShowToday]="nzShowToday"
+          [nzShowNow]="nzShowNow"
+          [nzMode]="nzMode"
+          [nzRanges]="nzRanges"
+          [nzDefaultPickerValue]="nzDefaultPickerValue"
+          [nzInline]="nzInline"
+          (nzOnPanelChange)="nzOnPanelChange($event)"
+          (nzOnCalendarChange)="nzOnCalendarChange($event)"
+          [nzShowTime]="nzShowTime"
+          (nzOnOk)="nzOnOk($event)"
+        />
+      }
+      @case (2) {
+        <nz-range-picker [nzOpen]="nzOpen" />
+      }
+      @case (3) {
+        <nz-range-picker nzOpen [(ngModel)]="modelValue" />
+      }
+      @case (4) {
+        <nz-range-picker [(ngModel)]="modelValue" />
+        <nz-date-picker [ngModel]="singleValue" />
+      }
+      @case (5) {
+        <nz-range-picker nzOpen></nz-range-picker>
+      }
+      @case (6) {
+        <nz-range-picker [nzSeparator]="separatorTemplate" />
+      }
+    }
   `
 })
 class NzTestRangePickerComponent {
diff --git a/components/date-picker/week-picker.component.spec.ts b/components/date-picker/week-picker.component.spec.ts
index 7ace20b69b..04b8d8dd0b 100644
--- a/components/date-picker/week-picker.component.spec.ts
+++ b/components/date-picker/week-picker.component.spec.ts
@@ -100,10 +100,14 @@ describe('NzWeekPickerComponent', () => {
 
 @Component({
   template: `
-    <ng-container [ngSwitch]="useSuite">
-      <nz-date-picker *ngSwitchCase="1" nzMode="week" [nzFormat]="nzFormat" [ngModel]="nzValue"></nz-date-picker>
-      <nz-week-picker *ngSwitchCase="2" [ngModel]="nzValue"></nz-week-picker>
-    </ng-container>
+    @switch (useSuite) {
+      @case (1) {
+        <nz-date-picker nzMode="week" [nzFormat]="nzFormat" [ngModel]="nzValue" />
+      }
+      @case (2) {
+        <nz-week-picker [ngModel]="nzValue" />
+      }
+    }
   `
 })
 export class NzTestWeekPickerComponent {
diff --git a/components/date-picker/year-picker.component.spec.ts b/components/date-picker/year-picker.component.spec.ts
index 00b3e6b520..24b3d4a443 100644
--- a/components/date-picker/year-picker.component.spec.ts
+++ b/components/date-picker/year-picker.component.spec.ts
@@ -351,42 +351,42 @@ describe('NzYearPickerComponent', () => {
 
 @Component({
   template: `
-    <ng-container [ngSwitch]="useSuite">
-      <!-- Suite 1 -->
-      <nz-date-picker
-        *ngSwitchCase="1"
-        nzMode="year"
-        [nzAllowClear]="nzAllowClear"
-        [nzAutoFocus]="nzAutoFocus"
-        [nzDisabled]="nzDisabled"
-        [nzDisabledDate]="nzDisabledDate"
-        [nzLocale]="nzLocale"
-        [nzPlaceHolder]="nzPlaceHolder"
-        [nzPopupStyle]="nzPopupStyle"
-        [nzDropdownClassName]="nzDropdownClassName"
-        [nzSize]="nzSize"
-        (nzOnOpenChange)="nzOnOpenChange($event)"
-        [ngModel]="nzValue"
-        (ngModelChange)="nzOnChange($event)"
-        [nzRenderExtraFooter]="nzRenderExtraFooter"
-      ></nz-date-picker>
-      <ng-template #tplExtraFooter>TEST_EXTRA_FOOTER</ng-template>
-
-      <!-- Suite 2 -->
-      <!-- use another picker to avoid nzOpen's side-effects beacuse nzOpen act as "true" if used -->
-      <nz-date-picker nzMode="year" *ngSwitchCase="2" [nzOpen]="nzOpen"></nz-date-picker>
-
-      <!-- Suite 3 -->
-      <nz-date-picker nzMode="year" *ngSwitchCase="3" nzOpen [(ngModel)]="modelValue"></nz-date-picker>
-
-      <!-- Suite 4 -->
-      <nz-input-group *ngSwitchCase="4" nzCompact>
-        <nz-date-picker nzMode="year" style="width: 200px;"></nz-date-picker>
-        <input nz-input type="text" style="width: 200px;" />
-      </nz-input-group>
-
-      <nz-year-picker *ngSwitchCase="5" nzOpen [(ngModel)]="modelValue"></nz-year-picker>
-    </ng-container>
+    <ng-template #tplExtraFooter>TEST_EXTRA_FOOTER</ng-template>
+    @switch (useSuite) {
+      @case (1) {
+        <nz-date-picker
+          nzMode="year"
+          [nzAllowClear]="nzAllowClear"
+          [nzAutoFocus]="nzAutoFocus"
+          [nzDisabled]="nzDisabled"
+          [nzDisabledDate]="nzDisabledDate"
+          [nzLocale]="nzLocale"
+          [nzPlaceHolder]="nzPlaceHolder"
+          [nzPopupStyle]="nzPopupStyle"
+          [nzDropdownClassName]="nzDropdownClassName"
+          [nzSize]="nzSize"
+          (nzOnOpenChange)="nzOnOpenChange($event)"
+          [ngModel]="nzValue"
+          (ngModelChange)="nzOnChange($event)"
+          [nzRenderExtraFooter]="nzRenderExtraFooter"
+        />
+      }
+      @case (2) {
+        <nz-date-picker nzMode="year" [nzOpen]="nzOpen" />
+      }
+      @case (3) {
+        <nz-date-picker nzMode="year" nzOpen [(ngModel)]="modelValue" />
+      }
+      @case (4) {
+        <nz-input-group nzCompact>
+          <nz-date-picker nzMode="year" style="width: 200px;" />
+          <input nz-input type="text" style="width: 200px;" />
+        </nz-input-group>
+      }
+      @case (5) {
+        <nz-year-picker nzOpen [(ngModel)]="modelValue" />
+      }
+    }
   `
 })
 class NzTestYearPickerComponent {