feat(planning): grille hebdomadaire complète avec API et filtres

- Connexion API via proxy Angular (résolution CORS, base path /api)
- Import CSS ng-zorro global pour les modales et composants
- Filtres Camion/Show câblés sur l'affichage de la grille
- Camions affichés via TrucksService (linkés au show du même créneau)
- Panneau de détails : spectacles + camions du jour sélectionné
- Modale de création de spectacle stylisée avec fond et centrage
- Positionnement précis des events à la minute dans leur créneau
- Auto-scroll vers l'heure courante au chargement
- Ligne "maintenant" sur la colonne du jour actuel
- Régénération des services OpenAPI (nouveaux noms de types)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

node_modules/ng-zorro-antd/schematics/demo/auto-complete-certain-category/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -1,6 +1,6 @@
 
     <div class="example-input">
-      <nz-input-wrapper>
+      <nz-input-group nzSize="large" [nzSuffix]="suffixIcon">
         <input
           placeholder="input here"
           nz-input
@@ -8,8 +8,10 @@
           (ngModelChange)="onChange($event)"
           [nzAutocomplete]="auto"
         />
-        <nz-icon nzInputSuffix nzType="search" />
-      </nz-input-wrapper>
+      </nz-input-group>
+      <ng-template #suffixIcon>
+        <nz-icon nzType="search" />
+      </ng-template>
       <nz-autocomplete #auto>
         @for (group of optionGroups; track group.title) {
           <nz-auto-optgroup [nzLabel]="groupTitle">

node_modules/ng-zorro-antd/schematics/demo/auto-complete-certain-category/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -17,7 +17,7 @@ interface AutocompleteOptionGroups {
   encapsulation: ViewEncapsulation.None,
   <% if(inlineTemplate) { %>template: `
     <div class="example-input">
-      <nz-input-wrapper>
+      <nz-input-group nzSize="large" [nzSuffix]="suffixIcon">
         <input
           placeholder="input here"
           nz-input
@@ -25,8 +25,10 @@ interface AutocompleteOptionGroups {
           (ngModelChange)="onChange($event)"
           [nzAutocomplete]="auto"
         />
-        <nz-icon nzInputSuffix nzType="search" />
-      </nz-input-wrapper>
+      </nz-input-group>
+      <ng-template #suffixIcon>
+        <nz-icon nzType="search" />
+      </ng-template>
       <nz-autocomplete #auto>
         @for (group of optionGroups; track group.title) {
           <nz-auto-optgroup [nzLabel]="groupTitle">

node_modules/ng-zorro-antd/schematics/demo/auto-complete-uncertain-category/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -1,14 +1,18 @@
 
-    <nz-input-search nzEnterButton>
+    <nz-input-group nzSearch nzSize="large" [nzAddOnAfter]="suffixIconButton">
       <input
-        nz-input
         placeholder="input here"
-        nzSize="large"
+        nz-input
         [(ngModel)]="inputValue"
         (input)="onChange($event)"
         [nzAutocomplete]="auto"
       />
-    </nz-input-search>
+    </nz-input-group>
+    <ng-template #suffixIconButton>
+      <button nz-button nzType="primary" nzSize="large" nzSearch>
+        <nz-icon nzType="search" nzTheme="outline" />
+      </button>
+    </ng-template>
     <nz-autocomplete #auto>
       @for (option of options; track option.category) {
         <nz-auto-option class="search-item" [nzValue]="option.category">

node_modules/ng-zorro-antd/schematics/demo/auto-complete-uncertain-category/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -11,16 +11,20 @@ import { NzInputModule } from 'ng-zorro-antd/input';
   imports: [FormsModule, NzAutocompleteModule, NzButtonModule, NzIconModule, NzInputModule],
   encapsulation: ViewEncapsulation.None,
   <% if(inlineTemplate) { %>template: `
-    <nz-input-search nzEnterButton>
+    <nz-input-group nzSearch nzSize="large" [nzAddOnAfter]="suffixIconButton">
       <input
-        nz-input
         placeholder="input here"
-        nzSize="large"
+        nz-input
         [(ngModel)]="inputValue"
         (input)="onChange($event)"
         [nzAutocomplete]="auto"
       />
-    </nz-input-search>
+    </nz-input-group>
+    <ng-template #suffixIconButton>
+      <button nz-button nzType="primary" nzSize="large" nzSearch>
+        <nz-icon nzType="search" nzTheme="outline" />
+      </button>
+    </ng-template>
     <nz-autocomplete #auto>
       @for (option of options; track option.category) {
         <nz-auto-option class="search-item" [nzValue]="option.category">

node_modules/ng-zorro-antd/schematics/demo/cascader-basic/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__style__.template

@@ -0,0 +1,7 @@
+
+      .change-options {
+        display: inline-block;
+        font-size: 12px;
+        margin-left: 8px;
+      }
+    

node_modules/ng-zorro-antd/schematics/demo/cascader-basic/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -1 +1,4 @@
-<nz-cascader [nzOptions]="nzOptions" [(ngModel)]="values" (ngModelChange)="onChanges($event)" />
+
+    <nz-cascader [nzOptions]="nzOptions" [(ngModel)]="values" (ngModelChange)="onChanges($event)"></nz-cascader>
+    <a (click)="changeNzOptions()" class="change-options">Change Options</a>
+  

node_modules/ng-zorro-antd/schematics/demo/cascader-basic/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
 import { NzCascaderModule, NzCascaderOption } from 'ng-zorro-antd/cascader';
@@ -45,15 +45,76 @@ const options: NzCascaderOption[] = [
   }
 ];
 
+const otherOptions: NzCascaderOption[] = [
+  {
+    value: 'fujian',
+    label: 'Fujian',
+    children: [
+      {
+        value: 'xiamen',
+        label: 'Xiamen',
+        children: [
+          {
+            value: 'Kulangsu',
+            label: 'Kulangsu',
+            isLeaf: true
+          }
+        ]
+      }
+    ]
+  },
+  {
+    value: 'guangxi',
+    label: 'Guangxi',
+    children: [
+      {
+        value: 'guilin',
+        label: 'Guilin',
+        children: [
+          {
+            value: 'Lijiang',
+            label: 'Li Jiang River',
+            isLeaf: true
+          }
+        ]
+      }
+    ]
+  }
+];
+
 @Component({
   selector: '<%= selector %>',
   imports: [FormsModule, NzCascaderModule],
-  <% if(inlineTemplate) { %>template: `<nz-cascader [nzOptions]="nzOptions" [(ngModel)]="values" (ngModelChange)="onChanges($event)" />`<% } else { %>templateUrl: './<%= dasherize(name) %>.component.html'<% } %>
+  <% if(inlineTemplate) { %>template: `
+    <nz-cascader [nzOptions]="nzOptions" [(ngModel)]="values" (ngModelChange)="onChanges($event)"></nz-cascader>
+    <a (click)="changeNzOptions()" class="change-options">Change Options</a>
+  `<% } else { %>templateUrl: './<%= dasherize(name) %>.component.html'<% } %>,
+  <% if(inlineStyle) { %>styles: [`
+      .change-options {
+        display: inline-block;
+        font-size: 12px;
+        margin-left: 8px;
+      }
+    `]<% } else { %>styleUrls: ['./<%= dasherize(name) %>.component.<%= style %>']<% } %>
 })
-export class <%= classify(name) %>Component {
-  readonly nzOptions: NzCascaderOption[] = options;
+export class <%= classify(name) %>Component implements OnInit {
+  nzOptions: NzCascaderOption[] | null = null;
   values: string[] | null = null;
 
+  ngOnInit(): void {
+    setTimeout(() => {
+      this.nzOptions = options;
+    }, 100);
+  }
+
+  changeNzOptions(): void {
+    if (this.nzOptions === options) {
+      this.nzOptions = otherOptions;
+    } else {
+      this.nzOptions = options;
+    }
+  }
+
   onChanges(values: string): void {
     console.log(values, this.values);
   }

node_modules/ng-zorro-antd/schematics/demo/cascader-change-on-function/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -4,5 +4,5 @@
       [nzOptions]="nzOptions"
       [(ngModel)]="values"
       (ngModelChange)="onChanges($event)"
-    />
+    ></nz-cascader>
   

node_modules/ng-zorro-antd/schematics/demo/cascader-change-on-function/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -60,11 +60,11 @@ const options: NzCascaderOption[] = [
       [nzOptions]="nzOptions"
       [(ngModel)]="values"
       (ngModelChange)="onChanges($event)"
-    />
+    ></nz-cascader>
   `<% } else { %>templateUrl: './<%= dasherize(name) %>.component.html'<% } %>
 })
 export class <%= classify(name) %>Component {
-  readonly nzOptions: NzCascaderOption[] = options;
+  nzOptions: NzCascaderOption[] = options;
   values: string[] | null = null;
 
   onChanges(values: string[]): void {

node_modules/ng-zorro-antd/schematics/demo/cascader-change-on-select/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -1,3 +1,8 @@
 
-    <nz-cascader nzChangeOnSelect [nzOptions]="nzOptions" [(ngModel)]="values" (ngModelChange)="onChanges($event)" />
+    <nz-cascader
+      nzChangeOnSelect
+      [nzOptions]="nzOptions"
+      [(ngModel)]="values"
+      (ngModelChange)="onChanges($event)"
+    ></nz-cascader>
   

node_modules/ng-zorro-antd/schematics/demo/cascader-change-on-select/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -49,11 +49,16 @@ const options: NzCascaderOption[] = [
   selector: '<%= selector %>',
   imports: [FormsModule, NzCascaderModule],
   <% if(inlineTemplate) { %>template: `
-    <nz-cascader nzChangeOnSelect [nzOptions]="nzOptions" [(ngModel)]="values" (ngModelChange)="onChanges($event)" />
+    <nz-cascader
+      nzChangeOnSelect
+      [nzOptions]="nzOptions"
+      [(ngModel)]="values"
+      (ngModelChange)="onChanges($event)"
+    ></nz-cascader>
   `<% } else { %>templateUrl: './<%= dasherize(name) %>.component.html'<% } %>
 })
 export class <%= classify(name) %>Component {
-  readonly nzOptions: NzCascaderOption[] = options;
+  nzOptions: NzCascaderOption[] = options;
   values: string[] | null = null;
 
   onChanges(values: string[]): void {

node_modules/ng-zorro-antd/schematics/demo/cascader-custom-field-names/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -7,5 +7,5 @@
       [nzShowSearch]="true"
       [(ngModel)]="values"
       (ngModelChange)="onChanges($event)"
-    />
+    ></nz-cascader>
   

node_modules/ng-zorro-antd/schematics/demo/cascader-custom-field-names/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -63,11 +63,11 @@ const options = [
       [nzShowSearch]="true"
       [(ngModel)]="values"
       (ngModelChange)="onChanges($event)"
-    />
+    ></nz-cascader>
   `<% } else { %>templateUrl: './<%= dasherize(name) %>.component.html'<% } %>
 })
 export class <%= classify(name) %>Component {
-  readonly nzOptions: NzCascaderOption[] = options;
+  nzOptions: NzCascaderOption[] = options;
   values: string[] | null = null;
 
   onChanges(values: string[]): void {

node_modules/ng-zorro-antd/schematics/demo/cascader-custom-render/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -5,7 +5,7 @@
       [nzOptions]="nzOptions"
       [(ngModel)]="values"
       (ngModelChange)="onChanges($event)"
-    />
+    ></nz-cascader>
 
     <ng-template #renderTpl let-labels="labels" let-selectedOptions="selectedOptions">
       @for (label of labels; track label) {

node_modules/ng-zorro-antd/schematics/demo/cascader-custom-render/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -58,7 +58,7 @@ const options: NzCascaderOption[] = [
       [nzOptions]="nzOptions"
       [(ngModel)]="values"
       (ngModelChange)="onChanges($event)"
-    />
+    ></nz-cascader>
 
     <ng-template #renderTpl let-labels="labels" let-selectedOptions="selectedOptions">
       @for (label of labels; track label) {
@@ -78,7 +78,7 @@ const options: NzCascaderOption[] = [
   `<% } else { %>templateUrl: './<%= dasherize(name) %>.component.html'<% } %>
 })
 export class <%= classify(name) %>Component {
-  readonly nzOptions: NzCascaderOption[] = options;
+  nzOptions: NzCascaderOption[] = options;
   values: string[] | null = null;
 
   onChanges(values: string[]): void {

node_modules/ng-zorro-antd/schematics/demo/cascader-custom-template/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -4,6 +4,6 @@
       [nzOptions]="nzOptions"
       [(ngModel)]="values"
       (ngModelChange)="onChanges($event)"
-    />
+    ></nz-cascader>
     <ng-template #renderTpl let-option let-index="index">{{ index + 1 }}. {{ option.label }}</ng-template>
   

node_modules/ng-zorro-antd/schematics/demo/cascader-custom-template/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -37,12 +37,12 @@ const options: NzCascaderOption[] = [
       [nzOptions]="nzOptions"
       [(ngModel)]="values"
       (ngModelChange)="onChanges($event)"
-    />
+    ></nz-cascader>
     <ng-template #renderTpl let-option let-index="index">{{ index + 1 }}. {{ option.label }}</ng-template>
   `<% } else { %>templateUrl: './<%= dasherize(name) %>.component.html'<% } %>
 })
 export class <%= classify(name) %>Component {
-  readonly nzOptions = options;
+  nzOptions = options;
   values: string[] | null = null;
 
   onChanges(values: string): void {

node_modules/ng-zorro-antd/schematics/demo/cascader-default-value-and-async-options/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -1 +1,3 @@
-<nz-cascader [(ngModel)]="values" [nzOptions]="nzOptions()" (ngModelChange)="onChanges($event)" />
+
+    <nz-cascader [(ngModel)]="values" [nzOptions]="nzOptions" (ngModelChange)="onChanges($event)"></nz-cascader>
+  

node_modules/ng-zorro-antd/schematics/demo/cascader-default-value-and-async-options/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -1,4 +1,4 @@
-import { Component, OnInit, signal } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
 import { NzCascaderModule, NzCascaderOption } from 'ng-zorro-antd/cascader';
@@ -48,10 +48,12 @@ const options: NzCascaderOption[] = [
 @Component({
   selector: '<%= selector %>',
   imports: [FormsModule, NzCascaderModule],
-  <% if(inlineTemplate) { %>template: `<nz-cascader [(ngModel)]="values" [nzOptions]="nzOptions()" (ngModelChange)="onChanges($event)" />`<% } else { %>templateUrl: './<%= dasherize(name) %>.component.html'<% } %>
+  <% if(inlineTemplate) { %>template: `
+    <nz-cascader [(ngModel)]="values" [nzOptions]="nzOptions" (ngModelChange)="onChanges($event)"></nz-cascader>
+  `<% } else { %>templateUrl: './<%= dasherize(name) %>.component.html'<% } %>
 })
 export class <%= classify(name) %>Component implements OnInit {
-  readonly nzOptions = signal<NzCascaderOption[] | null>(null);
+  nzOptions: NzCascaderOption[] | null = null;
   values: string[] = ['zhejiang', 'hangzhou', 'xihu'];
 
   onChanges(values: string[]): void {
@@ -59,6 +61,8 @@ export class <%= classify(name) %>Component implements OnInit {
   }
 
   ngOnInit(): void {
-    setTimeout(() => this.nzOptions.set(options), 500);
+    setTimeout(() => {
+      this.nzOptions = options;
+    }, 500);
   }
 }

node_modules/ng-zorro-antd/schematics/demo/cascader-default-value-and-lazy-load/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -1 +1,3 @@
-<nz-cascader [(ngModel)]="values" [nzLoadData]="loadData" (ngModelChange)="onChanges($event)" />
+
+    <nz-cascader [(ngModel)]="values" [nzLoadData]="loadData" (ngModelChange)="onChanges($event)"></nz-cascader>
+  

node_modules/ng-zorro-antd/schematics/demo/cascader-default-value-and-lazy-load/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -54,7 +54,9 @@ const scenicspots: { [key: string]: Array<{ value: string; label: string; isLeaf
 @Component({
   selector: '<%= selector %>',
   imports: [FormsModule, NzCascaderModule],
-  <% if(inlineTemplate) { %>template: `<nz-cascader [(ngModel)]="values" [nzLoadData]="loadData" (ngModelChange)="onChanges($event)" />`<% } else { %>templateUrl: './<%= dasherize(name) %>.component.html'<% } %>
+  <% if(inlineTemplate) { %>template: `
+    <nz-cascader [(ngModel)]="values" [nzLoadData]="loadData" (ngModelChange)="onChanges($event)"></nz-cascader>
+  `<% } else { %>templateUrl: './<%= dasherize(name) %>.component.html'<% } %>
 })
 export class <%= classify(name) %>Component {
   values: string[] = ['zhejiang', 'hangzhou', 'xihu'];

node_modules/ng-zorro-antd/schematics/demo/cascader-default-value/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -1 +1,3 @@
-<nz-cascader [nzOptions]="nzOptions" [(ngModel)]="values" (ngModelChange)="onChanges($event)" />
+
+    <nz-cascader [nzOptions]="nzOptions" [(ngModel)]="values" (ngModelChange)="onChanges($event)"></nz-cascader>
+  

node_modules/ng-zorro-antd/schematics/demo/cascader-default-value/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -48,11 +48,25 @@ const options: NzCascaderOption[] = [
 @Component({
   selector: '<%= selector %>',
   imports: [FormsModule, NzCascaderModule],
-  <% if(inlineTemplate) { %>template: `<nz-cascader [nzOptions]="nzOptions" [(ngModel)]="values" (ngModelChange)="onChanges($event)" />`<% } else { %>templateUrl: './<%= dasherize(name) %>.component.html'<% } %>
+  <% if(inlineTemplate) { %>template: `
+    <nz-cascader [nzOptions]="nzOptions" [(ngModel)]="values" (ngModelChange)="onChanges($event)"></nz-cascader>
+  `<% } else { %>templateUrl: './<%= dasherize(name) %>.component.html'<% } %>
 })
 export class <%= classify(name) %>Component {
-  readonly nzOptions: NzCascaderOption[] = options;
+  nzOptions: NzCascaderOption[] = options;
+
   values: string[] = ['zhejiang', 'hangzhou', 'xihu'];
+  /* // or like this:
+  values: any[] = [{
+    value: 'zhejiang',
+    label: 'Zhejiang'
+  }, {
+    value: 'hangzhou',
+    label: 'Hangzhou'
+  }, {
+    value: 'xihu',
+    label: 'West Lake'
+  }]; */
 
   onChanges(values: string[]): void {
     console.log(values, this.values);

node_modules/ng-zorro-antd/schematics/demo/cascader-disabled/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -1 +1,3 @@
-<nz-cascader [nzOptions]="nzOptions" [(ngModel)]="values" (ngModelChange)="onChanges($event)" />
+
+    <nz-cascader [nzOptions]="nzOptions" [(ngModel)]="values" (ngModelChange)="onChanges($event)"></nz-cascader>
+  

node_modules/ng-zorro-antd/schematics/demo/cascader-disabled/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -49,10 +49,12 @@ const options: NzCascaderOption[] = [
 @Component({
   selector: '<%= selector %>',
   imports: [FormsModule, NzCascaderModule],
-  <% if(inlineTemplate) { %>template: `<nz-cascader [nzOptions]="nzOptions" [(ngModel)]="values" (ngModelChange)="onChanges($event)" />`<% } else { %>templateUrl: './<%= dasherize(name) %>.component.html'<% } %>
+  <% if(inlineTemplate) { %>template: `
+    <nz-cascader [nzOptions]="nzOptions" [(ngModel)]="values" (ngModelChange)="onChanges($event)"></nz-cascader>
+  `<% } else { %>templateUrl: './<%= dasherize(name) %>.component.html'<% } %>
 })
 export class <%= classify(name) %>Component {
-  readonly nzOptions: NzCascaderOption[] = options;
+  nzOptions: NzCascaderOption[] = options;
   values: string[] | null = null;
 
   onChanges(values: string[]): void {

node_modules/ng-zorro-antd/schematics/demo/cascader-hover/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -1,8 +1,8 @@
 
     <nz-cascader
-      nzExpandTrigger="hover"
+      [nzExpandTrigger]="'hover'"
       [nzOptions]="nzOptions"
       [(ngModel)]="values"
       (ngModelChange)="onChanges($event)"
-    />
+    ></nz-cascader>
   

node_modules/ng-zorro-antd/schematics/demo/cascader-hover/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -50,15 +50,15 @@ const options: NzCascaderOption[] = [
   imports: [FormsModule, NzCascaderModule],
   <% if(inlineTemplate) { %>template: `
     <nz-cascader
-      nzExpandTrigger="hover"
+      [nzExpandTrigger]="'hover'"
       [nzOptions]="nzOptions"
       [(ngModel)]="values"
       (ngModelChange)="onChanges($event)"
-    />
+    ></nz-cascader>
   `<% } else { %>templateUrl: './<%= dasherize(name) %>.component.html'<% } %>
 })
 export class <%= classify(name) %>Component {
-  readonly nzOptions: NzCascaderOption[] = options;
+  nzOptions: NzCascaderOption[] = options;
   values: string[] | null = null;
 
   onChanges(values: string[]): void {

node_modules/ng-zorro-antd/schematics/demo/cascader-lazy/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -1 +1,3 @@
-<nz-cascader [(ngModel)]="values" [nzLoadData]="loadData" (ngModelChange)="onChanges($event)" />
+
+    <nz-cascader [(ngModel)]="values" [nzLoadData]="loadData" (ngModelChange)="onChanges($event)"></nz-cascader>
+  

node_modules/ng-zorro-antd/schematics/demo/cascader-lazy/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -54,7 +54,9 @@ const scenicspots: { [key: string]: Array<{ value: string; label: string; isLeaf
 @Component({
   selector: '<%= selector %>',
   imports: [FormsModule, NzCascaderModule],
-  <% if(inlineTemplate) { %>template: `<nz-cascader [(ngModel)]="values" [nzLoadData]="loadData" (ngModelChange)="onChanges($event)" />`<% } else { %>templateUrl: './<%= dasherize(name) %>.component.html'<% } %>
+  <% if(inlineTemplate) { %>template: `
+    <nz-cascader [(ngModel)]="values" [nzLoadData]="loadData" (ngModelChange)="onChanges($event)"></nz-cascader>
+  `<% } else { %>templateUrl: './<%= dasherize(name) %>.component.html'<% } %>
 })
 export class <%= classify(name) %>Component {
   values: string[] | null = null;

node_modules/ng-zorro-antd/schematics/demo/cascader-modal/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -5,7 +5,12 @@
       (nzOnCancel)="handleCancel($event)"
       (nzOnOk)="handleOk($event)"
     >
-      <nz-cascader *nzModalContent [nzOptions]="nzOptions" [(ngModel)]="values" (ngModelChange)="onChanges($event)" />
+      <nz-cascader
+        *nzModalContent
+        [nzOptions]="nzOptions"
+        [(ngModel)]="values"
+        (ngModelChange)="onChanges($event)"
+      ></nz-cascader>
     </nz-modal>
 
     <button nz-button (click)="open()">Open Dialog</button>

node_modules/ng-zorro-antd/schematics/demo/cascader-modal/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -57,7 +57,12 @@ const options: NzCascaderOption[] = [
       (nzOnCancel)="handleCancel($event)"
       (nzOnOk)="handleOk($event)"
     >
-      <nz-cascader *nzModalContent [nzOptions]="nzOptions" [(ngModel)]="values" (ngModelChange)="onChanges($event)" />
+      <nz-cascader
+        *nzModalContent
+        [nzOptions]="nzOptions"
+        [(ngModel)]="values"
+        (ngModelChange)="onChanges($event)"
+      ></nz-cascader>
     </nz-modal>
 
     <button nz-button (click)="open()">Open Dialog</button>

node_modules/ng-zorro-antd/schematics/demo/cascader-multiple/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -6,5 +6,5 @@
       (ngModelChange)="onChanges($event)"
       nzMultiple
       [nzMaxTagCount]="3"
-    />
+    ></nz-cascader>
   

node_modules/ng-zorro-antd/schematics/demo/cascader-multiple/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -51,11 +51,11 @@ const getOptions = (): NzCascaderOption[] => [
       (ngModelChange)="onChanges($event)"
       nzMultiple
       [nzMaxTagCount]="3"
-    />
+    ></nz-cascader>
   `<% } else { %>templateUrl: './<%= dasherize(name) %>.component.html'<% } %>
 })
 export class <%= classify(name) %>Component {
-  readonly nzOptions: NzCascaderOption[] = getOptions();
+  nzOptions: NzCascaderOption[] = getOptions();
   values: NzSafeAny[][] | null = null;
 
   onChanges(values: NzSafeAny[][]): void {

node_modules/ng-zorro-antd/schematics/demo/cascader-open/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -7,6 +7,6 @@
         [nzOpen]="open"
         (nzSelectionChange)="onSelectionChange($event)"
         (nzVisibleChange)="onVisibleChange($event)"
-      />
+      ></nz-cascader>
     </div>
   

node_modules/ng-zorro-antd/schematics/demo/cascader-open/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -59,12 +59,12 @@ const options: NzCascaderOption[] = [
         [nzOpen]="open"
         (nzSelectionChange)="onSelectionChange($event)"
         (nzVisibleChange)="onVisibleChange($event)"
-      />
+      ></nz-cascader>
     </div>
   `<% } else { %>templateUrl: './<%= dasherize(name) %>.component.html'<% } %>
 })
 export class <%= classify(name) %>Component {
-  readonly nzOptions = options;
+  nzOptions = options;
   values = ['zhejiang', 'hangzhou', 'xihu'];
   open = false;
 

node_modules/ng-zorro-antd/schematics/demo/cascader-placement/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -2,5 +2,5 @@
     <nz-segmented [nzOptions]="placements" (nzValueChange)="setPlacement($event)"></nz-segmented>
     <br />
     <br />
-    <nz-cascader [nzOptions]="nzOptions" [nzPlacement]="placement" />
+    <nz-cascader [nzOptions]="nzOptions" [nzPlacement]="placement"></nz-cascader>
   

node_modules/ng-zorro-antd/schematics/demo/cascader-placement/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -52,11 +52,11 @@ const options: NzCascaderOption[] = [
     <nz-segmented [nzOptions]="placements" (nzValueChange)="setPlacement($event)"></nz-segmented>
     <br />
     <br />
-    <nz-cascader [nzOptions]="nzOptions" [nzPlacement]="placement" />
+    <nz-cascader [nzOptions]="nzOptions" [nzPlacement]="placement"></nz-cascader>
   `<% } else { %>templateUrl: './<%= dasherize(name) %>.component.html'<% } %>
 })
 export class <%= classify(name) %>Component {
-  readonly nzOptions: NzCascaderOption[] = options;
+  nzOptions: NzCascaderOption[] = options;
   placement: NzCascaderPlacement = 'topLeft';
   readonly placements: NzCascaderPlacement[] = ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'];
 

node_modules/ng-zorro-antd/schematics/demo/cascader-prefix-and-suffix/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -1,8 +1,8 @@
 
     <nz-flex nzVertical nzGap="small">
-      <nz-cascader [nzOptions]="nzOptions" nzSuffixIcon="smile" />
-      <nz-cascader [nzOptions]="nzOptions" nzExpandIcon="smile" />
-      <nz-cascader [nzOptions]="nzOptions" [nzPrefix]="smile" />
+      <nz-cascader [nzOptions]="nzOptions" nzSuffixIcon="smile"></nz-cascader>
+      <nz-cascader [nzOptions]="nzOptions" nzExpandIcon="smile"></nz-cascader>
+      <nz-cascader [nzOptions]="nzOptions" [nzPrefix]="smile"></nz-cascader>
     </nz-flex>
     <ng-template #smile><nz-icon nzType="smile" /></ng-template>
   

node_modules/ng-zorro-antd/schematics/demo/cascader-prefix-and-suffix/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -51,9 +51,9 @@ const options: NzCascaderOption[] = [
   imports: [NzCascaderModule, NzFlexModule, NzIconModule],
   <% if(inlineTemplate) { %>template: `
     <nz-flex nzVertical nzGap="small">
-      <nz-cascader [nzOptions]="nzOptions" nzSuffixIcon="smile" />
-      <nz-cascader [nzOptions]="nzOptions" nzExpandIcon="smile" />
-      <nz-cascader [nzOptions]="nzOptions" [nzPrefix]="smile" />
+      <nz-cascader [nzOptions]="nzOptions" nzSuffixIcon="smile"></nz-cascader>
+      <nz-cascader [nzOptions]="nzOptions" nzExpandIcon="smile"></nz-cascader>
+      <nz-cascader [nzOptions]="nzOptions" [nzPrefix]="smile"></nz-cascader>
     </nz-flex>
     <ng-template #smile><nz-icon nzType="smile" /></ng-template>
   `<% } else { %>templateUrl: './<%= dasherize(name) %>.component.html'<% } %>

node_modules/ng-zorro-antd/schematics/demo/cascader-reactive-form/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -1,6 +1,6 @@
 
     <form [formGroup]="form" novalidate>
-      <nz-cascader [nzOptions]="nzOptions" formControlName="name" />
+      <nz-cascader [nzOptions]="nzOptions" formControlName="name"></nz-cascader>
     </form>
     <br />
     <button nz-button (click)="reset()">Reset</button>

node_modules/ng-zorro-antd/schematics/demo/cascader-reactive-form/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -1,6 +1,6 @@
-import { Component, inject } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Component, inject, OnDestroy } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Subscription } from 'rxjs';
 
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzCascaderModule, NzCascaderOption } from 'ng-zorro-antd/cascader';
@@ -52,7 +52,7 @@ const options: NzCascaderOption[] = [
   imports: [ReactiveFormsModule, NzButtonModule, NzCascaderModule],
   <% if(inlineTemplate) { %>template: `
     <form [formGroup]="form" novalidate>
-      <nz-cascader [nzOptions]="nzOptions" formControlName="name" />
+      <nz-cascader [nzOptions]="nzOptions" formControlName="name"></nz-cascader>
     </form>
     <br />
     <button nz-button (click)="reset()">Reset</button>
@@ -64,15 +64,16 @@ const options: NzCascaderOption[] = [
       }
     `]<% } else { %>styleUrls: ['./<%= dasherize(name) %>.component.<%= style %>']<% } %>
 })
-export class <%= classify(name) %>Component {
+export class <%= classify(name) %>Component implements OnDestroy {
   private fb = inject(FormBuilder);
   form = this.fb.group({
     name: this.fb.control<string[] | null>(null, Validators.required)
   });
-  readonly nzOptions: NzCascaderOption[] = options;
+  nzOptions: NzCascaderOption[] = options;
+  changeSubscription: Subscription;
 
   constructor() {
-    this.form.controls.name.valueChanges.pipe(takeUntilDestroyed()).subscribe(data => {
+    this.changeSubscription = this.form.controls.name.valueChanges.subscribe(data => {
       this.onChanges(data);
     });
   }
@@ -89,4 +90,8 @@ export class <%= classify(name) %>Component {
   onChanges(values: string[] | null): void {
     console.log(values);
   }
+
+  ngOnDestroy(): void {
+    this.changeSubscription.unsubscribe();
+  }
 }

node_modules/ng-zorro-antd/schematics/demo/cascader-search/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__style__.template

@@ -0,0 +1,7 @@
+
+      .change-options {
+        display: inline-block;
+        font-size: 12px;
+        margin-left: 8px;
+      }
+    

node_modules/ng-zorro-antd/schematics/demo/cascader-search/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -4,5 +4,6 @@
       [(ngModel)]="values"
       [nzShowSearch]="true"
       (ngModelChange)="onChanges($event)"
-    />
+    ></nz-cascader>
+    <a (click)="changeNzOptions()" class="change-options">Change Options</a>
   

node_modules/ng-zorro-antd/schematics/demo/cascader-search/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
 import { NzCascaderModule, NzCascaderOption } from 'ng-zorro-antd/cascader';
@@ -46,6 +46,43 @@ const options: NzCascaderOption[] = [
   }
 ];
 
+const otherOptions = [
+  {
+    value: 'fujian',
+    label: 'Fujian',
+    children: [
+      {
+        value: 'xiamen',
+        label: 'Xiamen',
+        children: [
+          {
+            value: 'Kulangsu',
+            label: 'Kulangsu',
+            isLeaf: true
+          }
+        ]
+      }
+    ]
+  },
+  {
+    value: 'guangxi',
+    label: 'Guangxi',
+    children: [
+      {
+        value: 'guilin',
+        label: 'Guilin',
+        children: [
+          {
+            value: 'Lijiang',
+            label: 'Li Jiang River',
+            isLeaf: true
+          }
+        ]
+      }
+    ]
+  }
+];
+
 @Component({
   selector: '<%= selector %>',
   imports: [FormsModule, NzCascaderModule],
@@ -55,13 +92,35 @@ const options: NzCascaderOption[] = [
       [(ngModel)]="values"
       [nzShowSearch]="true"
       (ngModelChange)="onChanges($event)"
-    />
-  `<% } else { %>templateUrl: './<%= dasherize(name) %>.component.html'<% } %>
+    ></nz-cascader>
+    <a (click)="changeNzOptions()" class="change-options">Change Options</a>
+  `<% } else { %>templateUrl: './<%= dasherize(name) %>.component.html'<% } %>,
+  <% if(inlineStyle) { %>styles: [`
+      .change-options {
+        display: inline-block;
+        font-size: 12px;
+        margin-left: 8px;
+      }
+    `]<% } else { %>styleUrls: ['./<%= dasherize(name) %>.component.<%= style %>']<% } %>
 })
-export class <%= classify(name) %>Component {
-  readonly nzOptions: NzCascaderOption[] = options;
+export class <%= classify(name) %>Component implements OnInit {
+  nzOptions: NzCascaderOption[] | null = null;
   values: string[] | null = null;
 
+  ngOnInit(): void {
+    setTimeout(() => {
+      this.nzOptions = options;
+    }, 100);
+  }
+
+  changeNzOptions(): void {
+    if (this.nzOptions === options) {
+      this.nzOptions = otherOptions;
+    } else {
+      this.nzOptions = options;
+    }
+  }
+
   onChanges(values: string[]): void {
     console.log(values, this.values);
   }

node_modules/ng-zorro-antd/schematics/demo/cascader-size/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -1,7 +1,19 @@
 
-    <nz-flex nzVertical nzGap="middle">
-      <nz-cascader nzSize="large" [nzOptions]="nzOptions" [(ngModel)]="value1" (ngModelChange)="onChanges($event)" />
-      <nz-cascader [nzOptions]="nzOptions" [(ngModel)]="value2" (ngModelChange)="onChanges($event)" />
-      <nz-cascader nzSize="small" [nzOptions]="nzOptions" [(ngModel)]="value3" (ngModelChange)="onChanges($event)" />
-    </nz-flex>
+    <nz-cascader
+      [nzSize]="'large'"
+      [nzOptions]="nzOptions"
+      [(ngModel)]="value1"
+      (ngModelChange)="onChanges($event)"
+    ></nz-cascader>
+    <br />
+    <br />
+    <nz-cascader [nzOptions]="nzOptions" [(ngModel)]="value2" (ngModelChange)="onChanges($event)"></nz-cascader>
+    <br />
+    <br />
+    <nz-cascader
+      nzSize="small"
+      [nzOptions]="nzOptions"
+      [(ngModel)]="value3"
+      (ngModelChange)="onChanges($event)"
+    ></nz-cascader>
   

node_modules/ng-zorro-antd/schematics/demo/cascader-size/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -2,7 +2,6 @@ import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
 import { NzCascaderModule, NzCascaderOption } from 'ng-zorro-antd/cascader';
-import { NzFlexModule } from 'ng-zorro-antd/flex';
 
 const options: NzCascaderOption[] = [
   {
@@ -48,17 +47,29 @@ const options: NzCascaderOption[] = [
 
 @Component({
   selector: '<%= selector %>',
-  imports: [FormsModule, NzCascaderModule, NzFlexModule],
+  imports: [FormsModule, NzCascaderModule],
   <% if(inlineTemplate) { %>template: `
-    <nz-flex nzVertical nzGap="middle">
-      <nz-cascader nzSize="large" [nzOptions]="nzOptions" [(ngModel)]="value1" (ngModelChange)="onChanges($event)" />
-      <nz-cascader [nzOptions]="nzOptions" [(ngModel)]="value2" (ngModelChange)="onChanges($event)" />
-      <nz-cascader nzSize="small" [nzOptions]="nzOptions" [(ngModel)]="value3" (ngModelChange)="onChanges($event)" />
-    </nz-flex>
+    <nz-cascader
+      [nzSize]="'large'"
+      [nzOptions]="nzOptions"
+      [(ngModel)]="value1"
+      (ngModelChange)="onChanges($event)"
+    ></nz-cascader>
+    <br />
+    <br />
+    <nz-cascader [nzOptions]="nzOptions" [(ngModel)]="value2" (ngModelChange)="onChanges($event)"></nz-cascader>
+    <br />
+    <br />
+    <nz-cascader
+      nzSize="small"
+      [nzOptions]="nzOptions"
+      [(ngModel)]="value3"
+      (ngModelChange)="onChanges($event)"
+    ></nz-cascader>
   `<% } else { %>templateUrl: './<%= dasherize(name) %>.component.html'<% } %>
 })
 export class <%= classify(name) %>Component {
-  readonly nzOptions: NzCascaderOption[] = options;
+  nzOptions: NzCascaderOption[] = options;
   value1: string[] | null = null;
   value2: string[] | null = null;
   value3: string[] | null = null;

node_modules/ng-zorro-antd/schematics/demo/cascader-status/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -1,6 +1,6 @@
 
-    <nz-flex nzVertical nzGap="middle">
-      <nz-cascader [nzOptions]="nzOptions" nzStatus="error" />
-      <nz-cascader [nzOptions]="nzOptions" nzStatus="warning" />
-    </nz-flex>
+    <nz-cascader [nzOptions]="nzOptions" nzStatus="error"></nz-cascader>
+    <br />
+    <br />
+    <nz-cascader [nzOptions]="nzOptions" nzStatus="warning"></nz-cascader>
   

node_modules/ng-zorro-antd/schematics/demo/cascader-status/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -2,18 +2,17 @@ import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
 import { NzCascaderModule, NzCascaderOption } from 'ng-zorro-antd/cascader';
-import { NzFlexModule } from 'ng-zorro-antd/flex';
 
 @Component({
   selector: '<%= selector %>',
-  imports: [FormsModule, NzCascaderModule, NzFlexModule],
+  imports: [FormsModule, NzCascaderModule],
   <% if(inlineTemplate) { %>template: `
-    <nz-flex nzVertical nzGap="middle">
-      <nz-cascader [nzOptions]="nzOptions" nzStatus="error" />
-      <nz-cascader [nzOptions]="nzOptions" nzStatus="warning" />
-    </nz-flex>
+    <nz-cascader [nzOptions]="nzOptions" nzStatus="error"></nz-cascader>
+    <br />
+    <br />
+    <nz-cascader [nzOptions]="nzOptions" nzStatus="warning"></nz-cascader>
   `<% } else { %>templateUrl: './<%= dasherize(name) %>.component.html'<% } %>
 })
 export class <%= classify(name) %>Component {
-  readonly nzOptions: NzCascaderOption[] = [];
+  nzOptions: NzCascaderOption[] = [];
 }

node_modules/ng-zorro-antd/schematics/demo/cascader-trigger-action/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -5,5 +5,5 @@
       [nzOptions]="nzOptions"
       [(ngModel)]="values"
       (ngModelChange)="onChanges($event)"
-    />
+    ></nz-cascader>
   

node_modules/ng-zorro-antd/schematics/demo/cascader-trigger-action/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -55,11 +55,11 @@ const options: NzCascaderOption[] = [
       [nzOptions]="nzOptions"
       [(ngModel)]="values"
       (ngModelChange)="onChanges($event)"
-    />
+    ></nz-cascader>
   `<% } else { %>templateUrl: './<%= dasherize(name) %>.component.html'<% } %>
 })
 export class <%= classify(name) %>Component {
-  readonly nzOptions: NzCascaderOption[] = options;
+  nzOptions: NzCascaderOption[] = options;
   values: string[] | null = null;
 
   onChanges(values: string[]): void {

node_modules/ng-zorro-antd/schematics/demo/cascader-trigger/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -62,7 +62,7 @@ const options: NzCascaderOption[] = [
   `<% } else { %>templateUrl: './<%= dasherize(name) %>.component.html'<% } %>
 })
 export class <%= classify(name) %>Component {
-  readonly nzOptions: NzCascaderOption[] = options;
+  nzOptions: NzCascaderOption[] = options;
   values: string[] | null = null;
   text = 'Unselect';
 

node_modules/ng-zorro-antd/schematics/demo/cascader-variant/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -1,8 +1,8 @@
 
-    <nz-flex nzVertical nzGap="middle">
-      <nz-cascader [nzOptions]="options" nzVariant="outlined" />
-      <nz-cascader [nzOptions]="options" nzVariant="filled" />
-      <nz-cascader [nzOptions]="options" nzVariant="borderless" />
-      <nz-cascader [nzOptions]="options" nzVariant="underlined" />
-    </nz-flex>
+    <nz-space nzDirection="vertical" style="width: 100%">
+      <nz-cascader *nzSpaceItem [nzOptions]="options" nzVariant="outlined" />
+      <nz-cascader *nzSpaceItem [nzOptions]="options" nzVariant="filled" />
+      <nz-cascader *nzSpaceItem [nzOptions]="options" nzVariant="borderless" />
+      <nz-cascader *nzSpaceItem [nzOptions]="options" nzVariant="underlined" />
+    </nz-space>
   

node_modules/ng-zorro-antd/schematics/demo/cascader-variant/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 import { NzCascaderModule, NzCascaderOption } from 'ng-zorro-antd/cascader';
-import { NzFlexModule } from 'ng-zorro-antd/flex';
+import { NzSpaceModule } from 'ng-zorro-antd/space';
 
 const options: NzCascaderOption[] = [
   {
@@ -47,16 +47,16 @@ const options: NzCascaderOption[] = [
 
 @Component({
   selector: '<%= selector %>',
-  imports: [NzCascaderModule, NzFlexModule],
+  imports: [NzCascaderModule, NzSpaceModule],
   <% if(inlineTemplate) { %>template: `
-    <nz-flex nzVertical nzGap="middle">
-      <nz-cascader [nzOptions]="options" nzVariant="outlined" />
-      <nz-cascader [nzOptions]="options" nzVariant="filled" />
-      <nz-cascader [nzOptions]="options" nzVariant="borderless" />
-      <nz-cascader [nzOptions]="options" nzVariant="underlined" />
-    </nz-flex>
+    <nz-space nzDirection="vertical" style="width: 100%">
+      <nz-cascader *nzSpaceItem [nzOptions]="options" nzVariant="outlined" />
+      <nz-cascader *nzSpaceItem [nzOptions]="options" nzVariant="filled" />
+      <nz-cascader *nzSpaceItem [nzOptions]="options" nzVariant="borderless" />
+      <nz-cascader *nzSpaceItem [nzOptions]="options" nzVariant="underlined" />
+    </nz-space>
   `<% } else { %>templateUrl: './<%= dasherize(name) %>.component.html'<% } %>
 })
 export class <%= classify(name) %>Component {
-  readonly options = options;
+  protected readonly options = options;
 }

node_modules/ng-zorro-antd/schematics/demo/drawer-from-drawer/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -23,9 +23,9 @@
             <nz-form-item>
               <nz-form-label>Url</nz-form-label>
               <nz-form-control>
-                <nz-input-wrapper nzAddonBefore="http://" nzAddonAfter=".com">
+                <nz-input-group nzAddOnBefore="http://" nzAddOnAfter=".com">
                   <input type="text" nz-input placeholder="please enter url" />
-                </nz-input-wrapper>
+                </nz-input-group>
               </nz-form-control>
             </nz-form-item>
           </div>

node_modules/ng-zorro-antd/schematics/demo/drawer-from-drawer/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -35,9 +35,9 @@ import { NzSelectModule } from 'ng-zorro-antd/select';
             <nz-form-item>
               <nz-form-label>Url</nz-form-label>
               <nz-form-control>
-                <nz-input-wrapper nzAddonBefore="http://" nzAddonAfter=".com">
+                <nz-input-group nzAddOnBefore="http://" nzAddOnAfter=".com">
                   <input type="text" nz-input placeholder="please enter url" />
-                </nz-input-wrapper>
+                </nz-input-group>
               </nz-form-control>
             </nz-form-item>
           </div>

node_modules/ng-zorro-antd/schematics/demo/form-horizontal-login/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -2,18 +2,16 @@
     <form nz-form [nzLayout]="'inline'" [formGroup]="validateForm" (ngSubmit)="submitForm()">
       <nz-form-item>
         <nz-form-control nzErrorTip="Please input your username!">
-          <nz-input-wrapper>
-            <nz-icon nzInputPrefix nzType="user" />
+          <nz-input-group nzPrefixIcon="user">
             <input formControlName="username" nz-input placeholder="username" />
-          </nz-input-wrapper>
+          </nz-input-group>
         </nz-form-control>
       </nz-form-item>
       <nz-form-item>
         <nz-form-control nzErrorTip="Please input your Password!">
-          <nz-input-password>
-            <nz-icon nzInputPrefix nzType="lock" />
-            <input formControlName="password" nz-input placeholder="Password" />
-          </nz-input-password>
+          <nz-input-group nzPrefixIcon="lock">
+            <input formControlName="password" nz-input type="password" placeholder="Password" />
+          </nz-input-group>
         </nz-form-control>
       </nz-form-item>
       <nz-form-item>

node_modules/ng-zorro-antd/schematics/demo/form-horizontal-login/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -12,18 +12,16 @@ import { NzInputModule } from 'ng-zorro-antd/input';
     <form nz-form [nzLayout]="'inline'" [formGroup]="validateForm" (ngSubmit)="submitForm()">
       <nz-form-item>
         <nz-form-control nzErrorTip="Please input your username!">
-          <nz-input-wrapper>
-            <nz-icon nzInputPrefix nzType="user" />
+          <nz-input-group nzPrefixIcon="user">
             <input formControlName="username" nz-input placeholder="username" />
-          </nz-input-wrapper>
+          </nz-input-group>
         </nz-form-control>
       </nz-form-item>
       <nz-form-item>
         <nz-form-control nzErrorTip="Please input your Password!">
-          <nz-input-password>
-            <nz-icon nzInputPrefix nzType="lock" />
-            <input formControlName="password" nz-input placeholder="Password" />
-          </nz-input-password>
+          <nz-input-group nzPrefixIcon="lock">
+            <input formControlName="password" nz-input type="password" placeholder="Password" />
+          </nz-input-group>
         </nz-form-control>
       </nz-form-item>
       <nz-form-item>

node_modules/ng-zorro-antd/schematics/demo/form-normal-login/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -2,18 +2,16 @@
     <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
       <nz-form-item>
         <nz-form-control nzErrorTip="Please input your username!">
-          <nz-input-wrapper>
-            <nz-icon nzInputPrefix nzType="user" />
+          <nz-input-group nzPrefixIcon="user">
             <input type="text" nz-input formControlName="username" placeholder="Username" />
-          </nz-input-wrapper>
+          </nz-input-group>
         </nz-form-control>
       </nz-form-item>
       <nz-form-item>
         <nz-form-control nzErrorTip="Please input your Password!">
-          <nz-input-password>
-            <nz-icon nzInputPrefix nzType="lock" />
-            <input nz-input formControlName="password" placeholder="Password" />
-          </nz-input-password>
+          <nz-input-group nzPrefixIcon="lock">
+            <input type="password" nz-input formControlName="password" placeholder="Password" />
+          </nz-input-group>
         </nz-form-control>
       </nz-form-item>
       <div nz-row class="login-form-margin">

node_modules/ng-zorro-antd/schematics/demo/form-normal-login/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -13,18 +13,16 @@ import { NzInputModule } from 'ng-zorro-antd/input';
     <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
       <nz-form-item>
         <nz-form-control nzErrorTip="Please input your username!">
-          <nz-input-wrapper>
-            <nz-icon nzInputPrefix nzType="user" />
+          <nz-input-group nzPrefixIcon="user">
             <input type="text" nz-input formControlName="username" placeholder="Username" />
-          </nz-input-wrapper>
+          </nz-input-group>
         </nz-form-control>
       </nz-form-item>
       <nz-form-item>
         <nz-form-control nzErrorTip="Please input your Password!">
-          <nz-input-password>
-            <nz-icon nzInputPrefix nzType="lock" />
-            <input nz-input formControlName="password" placeholder="Password" />
-          </nz-input-password>
+          <nz-input-group nzPrefixIcon="lock">
+            <input type="password" nz-input formControlName="password" placeholder="Password" />
+          </nz-input-group>
         </nz-form-control>
       </nz-form-item>
       <div nz-row class="login-form-margin">

node_modules/ng-zorro-antd/schematics/demo/form-register/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -48,13 +48,15 @@
           [nzValidateStatus]="validateForm.controls['phoneNumber']"
           nzErrorTip="Please input your phone number!"
         >
-          <nz-input-wrapper>
-            <nz-select nzInputAddonBefore formControlName="phoneNumberPrefix" class="phone-select">
-              <nz-option nzLabel="+86" nzValue="+86"></nz-option>
-              <nz-option nzLabel="+87" nzValue="+87"></nz-option>
-            </nz-select>
+          <nz-input-group [nzAddOnBefore]="addOnBeforeTemplate">
+            <ng-template #addOnBeforeTemplate>
+              <nz-select formControlName="phoneNumberPrefix" class="phone-select">
+                <nz-option nzLabel="+86" nzValue="+86"></nz-option>
+                <nz-option nzLabel="+87" nzValue="+87"></nz-option>
+              </nz-select>
+            </ng-template>
             <input formControlName="phoneNumber" id="'phoneNumber'" nz-input />
-          </nz-input-wrapper>
+          </nz-input-group>
         </nz-form-control>
       </nz-form-item>
       <nz-form-item>

node_modules/ng-zorro-antd/schematics/demo/form-register/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -68,13 +68,15 @@ import { NzSelectModule } from 'ng-zorro-antd/select';
           [nzValidateStatus]="validateForm.controls['phoneNumber']"
           nzErrorTip="Please input your phone number!"
         >
-          <nz-input-wrapper>
-            <nz-select nzInputAddonBefore formControlName="phoneNumberPrefix" class="phone-select">
-              <nz-option nzLabel="+86" nzValue="+86"></nz-option>
-              <nz-option nzLabel="+87" nzValue="+87"></nz-option>
-            </nz-select>
+          <nz-input-group [nzAddOnBefore]="addOnBeforeTemplate">
+            <ng-template #addOnBeforeTemplate>
+              <nz-select formControlName="phoneNumberPrefix" class="phone-select">
+                <nz-option nzLabel="+86" nzValue="+86"></nz-option>
+                <nz-option nzLabel="+87" nzValue="+87"></nz-option>
+              </nz-select>
+            </ng-template>
             <input formControlName="phoneNumber" id="'phoneNumber'" nz-input />
-          </nz-input-wrapper>
+          </nz-input-group>
         </nz-form-control>
       </nz-form-item>
       <nz-form-item>

node_modules/ng-zorro-antd/schematics/demo/result-custom/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -1,5 +1,5 @@
 
-    <nz-result nzIcon="smile-o" nzTitle="Great, we have done all the operators!">
+    <nz-result nzIcon="smile-twotone" nzTitle="Great, we have done all the operators!">
       <div nz-result-extra>
         <button nz-button nzType="primary">Next</button>
       </div>

node_modules/ng-zorro-antd/schematics/demo/result-custom/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -7,7 +7,7 @@ import { NzResultModule } from 'ng-zorro-antd/result';
   selector: '<%= selector %>',
   imports: [NzButtonModule, NzResultModule],
   <% if(inlineTemplate) { %>template: `
-    <nz-result nzIcon="smile-o" nzTitle="Great, we have done all the operators!">
+    <nz-result nzIcon="smile-twotone" nzTitle="Great, we have done all the operators!">
       <div nz-result-extra>
         <button nz-button nzType="primary">Next</button>
       </div>

node_modules/ng-zorro-antd/schematics/demo/space-compact/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -30,15 +30,30 @@
     </nz-space-compact>
     <br />
     <nz-space-compact nzBlock>
-      <nz-input-search [style.width.%]="30">
+      <nz-input-group nzSearch [nzAddOnAfter]="addonTmpl" [style.width.%]="30">
         <input nz-input value="0571" />
-      </nz-input-search>
-      <nz-input-search [style.width.%]="50">
+        <ng-template #addonTmpl>
+          <button nz-button class="ant-input-search-button">
+            <nz-icon nzType="search" />
+          </button>
+        </ng-template>
+      </nz-input-group>
+      <nz-input-group nzSearch [nzAddOnAfter]="addonTmpl" [style.width.%]="50">
         <input nz-input value="26888888" />
-      </nz-input-search>
-      <nz-input-search [style.width.%]="20">
+        <ng-template #addonTmpl>
+          <button nz-button class="ant-input-search-button">
+            <nz-icon nzType="search" />
+          </button>
+        </ng-template>
+      </nz-input-group>
+      <nz-input-group nzSearch [nzAddOnAfter]="addonTmpl" [style.width.%]="20">
         <input nz-input value="+1" />
-      </nz-input-search>
+        <ng-template #addonTmpl>
+          <button nz-button class="ant-input-search-button">
+            <nz-icon nzType="search" />
+          </button>
+        </ng-template>
+      </nz-input-group>
     </nz-space-compact>
     <br />
     <nz-space-compact nzBlock>
@@ -133,9 +148,9 @@
     </nz-space-compact>
     <br />
     <nz-space-compact nzBlock>
-      <nz-input-wrapper nzAddOnBefore="Http://" nzAddOnAfter=".com" [style.width.%]="50">
+      <nz-input-group nzAddOnBefore="Http://" nzAddOnAfter=".com" [style.width.%]="50">
         <input nz-input placeholder="input here" />
-      </nz-input-wrapper>
+      </nz-input-group>
       <nz-input-number>
         <span nzInputPrefix>$</span>
       </nz-input-number>

node_modules/ng-zorro-antd/schematics/demo/space-compact/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -63,15 +63,30 @@ import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
     </nz-space-compact>
     <br />
     <nz-space-compact nzBlock>
-      <nz-input-search [style.width.%]="30">
+      <nz-input-group nzSearch [nzAddOnAfter]="addonTmpl" [style.width.%]="30">
         <input nz-input value="0571" />
-      </nz-input-search>
-      <nz-input-search [style.width.%]="50">
+        <ng-template #addonTmpl>
+          <button nz-button class="ant-input-search-button">
+            <nz-icon nzType="search" />
+          </button>
+        </ng-template>
+      </nz-input-group>
+      <nz-input-group nzSearch [nzAddOnAfter]="addonTmpl" [style.width.%]="50">
         <input nz-input value="26888888" />
-      </nz-input-search>
-      <nz-input-search [style.width.%]="20">
+        <ng-template #addonTmpl>
+          <button nz-button class="ant-input-search-button">
+            <nz-icon nzType="search" />
+          </button>
+        </ng-template>
+      </nz-input-group>
+      <nz-input-group nzSearch [nzAddOnAfter]="addonTmpl" [style.width.%]="20">
         <input nz-input value="+1" />
-      </nz-input-search>
+        <ng-template #addonTmpl>
+          <button nz-button class="ant-input-search-button">
+            <nz-icon nzType="search" />
+          </button>
+        </ng-template>
+      </nz-input-group>
     </nz-space-compact>
     <br />
     <nz-space-compact nzBlock>
@@ -166,9 +181,9 @@ import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
     </nz-space-compact>
     <br />
     <nz-space-compact nzBlock>
-      <nz-input-wrapper nzAddOnBefore="Http://" nzAddOnAfter=".com" [style.width.%]="50">
+      <nz-input-group nzAddOnBefore="Http://" nzAddOnAfter=".com" [style.width.%]="50">
         <input nz-input placeholder="input here" />
-      </nz-input-wrapper>
+      </nz-input-group>
       <nz-input-number>
         <span nzInputPrefix>$</span>
       </nz-input-number>

node_modules/ng-zorro-antd/schematics/demo/tree-search/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -1,8 +1,10 @@
 
-    <nz-input-wrapper>
+    <nz-input-group [nzSuffix]="suffixIcon">
       <input type="text" nz-input placeholder="Search" [(ngModel)]="searchValue" />
-      <nz-icon nzInputSuffix nzType="search" />
-    </nz-input-wrapper>
+    </nz-input-group>
+    <ng-template #suffixIcon>
+      <nz-icon nzType="search" />
+    </ng-template>
     <br />
     <nz-tree
       [nzData]="nodes"

node_modules/ng-zorro-antd/schematics/demo/tree-search/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -9,10 +9,12 @@ import { NzFormatEmitEvent, NzTreeModule } from 'ng-zorro-antd/tree';
   selector: '<%= selector %>',
   imports: [FormsModule, NzIconModule, NzInputModule, NzTreeModule],
   <% if(inlineTemplate) { %>template: `
-    <nz-input-wrapper>
+    <nz-input-group [nzSuffix]="suffixIcon">
       <input type="text" nz-input placeholder="Search" [(ngModel)]="searchValue" />
-      <nz-icon nzInputSuffix nzType="search" />
-    </nz-input-wrapper>
+    </nz-input-group>
+    <ng-template #suffixIcon>
+      <nz-icon nzType="search" />
+    </ng-template>
     <br />
     <nz-tree
       [nzData]="nodes"

node_modules/ng-zorro-antd/schematics/demo/tree-view-search/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -1,8 +1,10 @@
 
-    <nz-input-wrapper>
+    <nz-input-group [nzSuffix]="suffixIcon">
       <input type="text" nz-input placeholder="Search" ngModel (ngModelChange)="searchValue$.next($event)" />
-      <nz-icon nzInputSuffix nzType="search" />
-    </nz-input-wrapper>
+    </nz-input-group>
+    <ng-template #suffixIcon>
+      <nz-icon nzType="search" />
+    </ng-template>
 
     <nz-tree-view [nzTreeControl]="treeControl" [nzDataSource]="dataSource" nzNoAnimation>
       <nz-tree-node *nzTreeNodeDef="let node" nzTreeNodePadding>

node_modules/ng-zorro-antd/schematics/demo/tree-view-search/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -76,10 +76,12 @@ function filterTreeData(data: TreeNode[], value: string): FilteredTreeResult {
   selector: '<%= selector %>',
   imports: [FormsModule, NzInputModule, NzIconModule, NzTreeViewModule, NzNoAnimationDirective, NzHighlightPipe],
   <% if(inlineTemplate) { %>template: `
-    <nz-input-wrapper>
+    <nz-input-group [nzSuffix]="suffixIcon">
       <input type="text" nz-input placeholder="Search" ngModel (ngModelChange)="searchValue$.next($event)" />
-      <nz-icon nzInputSuffix nzType="search" />
-    </nz-input-wrapper>
+    </nz-input-group>
+    <ng-template #suffixIcon>
+      <nz-icon nzType="search" />
+    </ng-template>
 
     <nz-tree-view [nzTreeControl]="treeControl" [nzDataSource]="dataSource" nzNoAnimation>
       <nz-tree-node *nzTreeNodeDef="let node" nzTreeNodePadding>