fix(module:cascader): fix zoneless NG0100 issue (#9504)

Author: Laffery

components/cascader/cascader.component.ts

@@ -137,7 +137,7 @@ const defaultDisplayRender = (labels: string[]): string => labels.join(' / ');
                   [mirrorSync]="true"
                   [disabled]="nzDisabled"
                   [autofocus]="nzAutoFocus"
-                  [focusTrigger]="menuVisible"
+                  [focusTrigger]="menuVisible()"
                 />
               </div>
             </div>
@@ -150,7 +150,7 @@ const defaultDisplayRender = (labels: string[]): string => labels.join(' / ');
               [mirrorSync]="false"
               [disabled]="nzDisabled"
               [autofocus]="nzAutoFocus"
-              [focusTrigger]="menuVisible"
+              [focusTrigger]="menuVisible()"
             />
 
             @if (showLabelRender) {
@@ -175,7 +175,7 @@ const defaultDisplayRender = (labels: string[]): string => labels.join(' / ');
       @if (nzShowArrow) {
         <span class="ant-select-arrow" [class.ant-select-arrow-loading]="isLoading">
           @if (!isLoading) {
-            <nz-icon [nzType]="$any(nzSuffixIcon)" [class.ant-cascader-picker-arrow-expand]="menuVisible" />
+            <nz-icon [nzType]="$any(nzSuffixIcon)" [class.ant-cascader-picker-arrow-expand]="menuVisible()" />
           } @else {
             <nz-icon nzType="loading" />
           }
@@ -198,7 +198,7 @@ const defaultDisplayRender = (labels: string[]): string => labels.join(' / ');
       [cdkConnectedOverlayOrigin]="overlayOrigin"
       [cdkConnectedOverlayPositions]="positions"
       [cdkConnectedOverlayTransformOriginOn]="'.ant-cascader-dropdown'"
-      [cdkConnectedOverlayOpen]="menuVisible"
+      [cdkConnectedOverlayOpen]="menuVisible()"
       (overlayOutsideClick)="onClickOutside($event)"
       (detach)="closeMenu()"
       (positionChange)="onPositionChange($event)"
@@ -220,7 +220,7 @@ const defaultDisplayRender = (labels: string[]): string => labels.join(' / ');
           #menu
           class="ant-cascader-menus"
           [class.ant-cascader-rtl]="dir === 'rtl'"
-          [class.ant-cascader-menus-hidden]="!menuVisible"
+          [class.ant-cascader-menus-hidden]="!menuVisible()"
           [class.ant-cascader-menu-empty]="shouldShowEmpty"
           [class]="nzMenuClassName"
           [style]="nzMenuStyle"
@@ -291,7 +291,7 @@ const defaultDisplayRender = (labels: string[]): string => labels.join(' / ');
     '[class.ant-select-borderless]': `nzVariant === 'borderless'`,
     '[class.ant-select-filled]': `nzVariant === 'filled'`,
     '[class.ant-select-underlined]': `nzVariant === 'underlined'`,
-    '[class.ant-select-open]': 'menuVisible',
+    '[class.ant-select-open]': 'menuVisible()',
     '[class.ant-select-focused]': 'isFocused',
     '[class.ant-select-multiple]': 'nzMultiple',
     '[class.ant-select-single]': '!nzMultiple',
@@ -416,7 +416,7 @@ export class NzCascaderComponent
   shouldShowEmpty: boolean = false;
 
   el: HTMLElement = this.elementRef.nativeElement;
-  menuVisible = false;
+  readonly menuVisible = signal(false);
   isLoading = false;
   labelRenderText?: string;
   labelRenderContext = {};
@@ -528,9 +528,7 @@ export class NzCascaderComponent
         map(([{ status, hasFeedback }, noStatus]) => ({ status: noStatus ? '' : status, hasFeedback })),
         takeUntilDestroyed(this.destroyRef)
       )
-      .subscribe(({ status, hasFeedback }) => {
-        this.setStatusStyles(status, hasFeedback);
-      });
+      .subscribe(({ status, hasFeedback }) => this.setStatusStyles(status, hasFeedback));
 
     const srv = this.cascaderService;
 
@@ -570,9 +568,9 @@ export class NzCascaderComponent
       this.dropdownWidthStyle = '';
     });
 
-    this.i18nService.localeChange.pipe(startWith(), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
-      this.setLocale();
-    });
+    this.i18nService.localeChange
+      .pipe(startWith(), takeUntilDestroyed(this.destroyRef))
+      .subscribe(() => this.setLocale());
 
     this.size.set(this.nzSize);
 
@@ -672,7 +670,7 @@ export class NzCascaderComponent
   }
 
   setMenuVisible(visible: boolean): void {
-    if (this.nzDisabled || this.menuVisible === visible) {
+    if (this.nzDisabled || this.menuVisible() === visible) {
       return;
     }
     if (visible) {
@@ -683,7 +681,7 @@ export class NzCascaderComponent
       this.inputValue = '';
     }
 
-    this.menuVisible = visible;
+    this.menuVisible.set(visible);
     this.nzVisibleChange.emit(visible);
     this.cdr.detectChanges();
   }
@@ -752,7 +750,7 @@ export class NzCascaderComponent
   }
 
   handleInputBlur(): void {
-    this.menuVisible ? this.focus() : this.blur();
+    this.menuVisible() ? this.focus() : this.blur();
   }
 
   handleInputFocus(): void {
@@ -772,7 +770,7 @@ export class NzCascaderComponent
       this.focus();
     }
     if (this.isActionTrigger('click')) {
-      this.delaySetMenuVisible(!this.menuVisible, 100);
+      this.delaySetMenuVisible(!this.menuVisible(), 100);
     }
     this.onTouched();
   }
@@ -790,7 +788,7 @@ export class NzCascaderComponent
   onTriggerMouseLeave(event: MouseEvent): void {
     if (
       this.nzDisabled ||
-      !this.menuVisible ||
+      !this.menuVisible() ||
       this.isOpening ||
       !this.isActionTrigger('hover') ||
       this.openControlled
@@ -1130,7 +1128,7 @@ export class NzCascaderComponent
    * and may exceed the boundary of browser's window.
    */
   private reposition(): void {
-    if (this.overlay && this.overlay.overlayRef && this.menuVisible) {
+    if (this.overlay && this.overlay.overlayRef && this.menuVisible()) {
       Promise.resolve().then(() => {
         this.overlay.overlayRef.updatePosition();
         this.cdr.markForCheck();
@@ -1257,7 +1255,7 @@ export class NzCascaderComponent
         }
 
         // Press any keys above to reopen menu.
-        if (!this.menuVisible && keyCode !== BACKSPACE && keyCode !== ESCAPE && !this.openControlled) {
+        if (!this.menuVisible() && keyCode !== BACKSPACE && keyCode !== ESCAPE && !this.openControlled) {
           // The `setMenuVisible` runs `detectChanges()`, so we don't need to run `markForCheck()` additionally.
           return this.ngZone.run(() => this.setMenuVisible(true));
         }
@@ -1267,7 +1265,7 @@ export class NzCascaderComponent
           return;
         }
 
-        if (!this.menuVisible) {
+        if (!this.menuVisible()) {
           return;
         }
 

components/cascader/demo/basic.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
 import { NzCascaderModule, NzCascaderOption } from 'ng-zorro-antd/cascader';
@@ -45,78 +45,15 @@ 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: 'nz-demo-cascader-basic',
   imports: [FormsModule, NzCascaderModule],
-  template: `
-    <nz-cascader [nzOptions]="nzOptions" [(ngModel)]="values" (ngModelChange)="onChanges($event)"></nz-cascader>
-    <a (click)="changeNzOptions()" class="change-options">Change Options</a>
-  `,
-  styles: [
-    `
-      .change-options {
-        display: inline-block;
-        font-size: 12px;
-        margin-left: 8px;
-      }
-    `
-  ]
+  template: `<nz-cascader [nzOptions]="nzOptions" [(ngModel)]="values" (ngModelChange)="onChanges($event)" />`
 })
-export class NzDemoCascaderBasicComponent implements OnInit {
-  nzOptions: NzCascaderOption[] | null = null;
+export class NzDemoCascaderBasicComponent {
+  readonly nzOptions: NzCascaderOption[] = options;
   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);
   }

components/cascader/demo/change-on-function.ts

@@ -60,11 +60,11 @@ const options: NzCascaderOption[] = [
       [nzOptions]="nzOptions"
       [(ngModel)]="values"
       (ngModelChange)="onChanges($event)"
-    ></nz-cascader>
+    />
   `
 })
 export class NzDemoCascaderChangeOnFunctionComponent {
-  nzOptions: NzCascaderOption[] = options;
+  readonly nzOptions: NzCascaderOption[] = options;
   values: string[] | null = null;
 
   onChanges(values: string[]): void {

components/cascader/demo/change-on-select.ts

@@ -49,16 +49,11 @@ const options: NzCascaderOption[] = [
   selector: 'nz-demo-cascader-change-on-select',
   imports: [FormsModule, NzCascaderModule],
   template: `
-    <nz-cascader
-      nzChangeOnSelect
-      [nzOptions]="nzOptions"
-      [(ngModel)]="values"
-      (ngModelChange)="onChanges($event)"
-    ></nz-cascader>
+    <nz-cascader nzChangeOnSelect [nzOptions]="nzOptions" [(ngModel)]="values" (ngModelChange)="onChanges($event)" />
   `
 })
 export class NzDemoCascaderChangeOnSelectComponent {
-  nzOptions: NzCascaderOption[] = options;
+  readonly nzOptions: NzCascaderOption[] = options;
   values: string[] | null = null;
 
   onChanges(values: string[]): void {

components/cascader/demo/custom-field-names.ts

@@ -63,11 +63,11 @@ const options = [
       [nzShowSearch]="true"
       [(ngModel)]="values"
       (ngModelChange)="onChanges($event)"
-    ></nz-cascader>
+    />
   `
 })
 export class NzDemoCascaderCustomFieldNamesComponent {
-  nzOptions: NzCascaderOption[] = options;
+  readonly nzOptions: NzCascaderOption[] = options;
   values: string[] | null = null;
 
   onChanges(values: string[]): void {

components/cascader/demo/custom-render.ts

@@ -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[] = [
   `
 })
 export class NzDemoCascaderCustomRenderComponent {
-  nzOptions: NzCascaderOption[] = options;
+  readonly nzOptions: NzCascaderOption[] = options;
   values: string[] | null = null;
 
   onChanges(values: string[]): void {

components/cascader/demo/custom-template.ts

@@ -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>
   `
 })
 export class NzDemoCascaderCustomTemplateComponent {
-  nzOptions = options;
+  readonly nzOptions = options;
   values: string[] | null = null;
 
   onChanges(values: string): void {

components/cascader/demo/default-value-and-async-options.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
 import { NzCascaderModule, NzCascaderOption } from 'ng-zorro-antd/cascader';
@@ -48,21 +48,17 @@ const options: NzCascaderOption[] = [
 @Component({
   selector: 'nz-demo-cascader-default-value-and-async-options',
   imports: [FormsModule, NzCascaderModule],
-  template: `
-    <nz-cascader [(ngModel)]="values" [nzOptions]="nzOptions" (ngModelChange)="onChanges($event)"></nz-cascader>
-  `
+  template: `<nz-cascader [(ngModel)]="values" [nzOptions]="nzOptions()" (ngModelChange)="onChanges($event)" />`
 })
 export class NzDemoCascaderDefaultValueAndAsyncOptionsComponent implements OnInit {
-  nzOptions: NzCascaderOption[] | null = null;
+  readonly nzOptions = signal<NzCascaderOption[] | null>(null);
   values: string[] = ['zhejiang', 'hangzhou', 'xihu'];
 
   onChanges(values: string[]): void {
     console.log(values, this.values);
   }
 
   ngOnInit(): void {
-    setTimeout(() => {
-      this.nzOptions = options;
-    }, 500);
+    setTimeout(() => this.nzOptions.set(options), 500);
   }
 }

components/cascader/demo/default-value-and-lazy-load.ts

@@ -54,9 +54,7 @@ const scenicspots: { [key: string]: Array<{ value: string; label: string; isLeaf
 @Component({
   selector: 'nz-demo-cascader-default-value-and-lazy-load',
   imports: [FormsModule, NzCascaderModule],
-  template: `
-    <nz-cascader [(ngModel)]="values" [nzLoadData]="loadData" (ngModelChange)="onChanges($event)"></nz-cascader>
-  `
+  template: `<nz-cascader [(ngModel)]="values" [nzLoadData]="loadData" (ngModelChange)="onChanges($event)" />`
 })
 export class NzDemoCascaderDefaultValueAndLazyLoadComponent {
   values: string[] = ['zhejiang', 'hangzhou', 'xihu'];

components/cascader/demo/default-value.ts

@@ -48,25 +48,11 @@ const options: NzCascaderOption[] = [
 @Component({
   selector: 'nz-demo-cascader-default-value',
   imports: [FormsModule, NzCascaderModule],
-  template: `
-    <nz-cascader [nzOptions]="nzOptions" [(ngModel)]="values" (ngModelChange)="onChanges($event)"></nz-cascader>
-  `
+  template: `<nz-cascader [nzOptions]="nzOptions" [(ngModel)]="values" (ngModelChange)="onChanges($event)" />`
 })
 export class NzDemoCascaderDefaultValueComponent {
-  nzOptions: NzCascaderOption[] = options;
-
+  readonly 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);