refactor(module:*): use ECMAScript standard class field

components/avatar/avatar.component.ts

@@ -16,7 +16,8 @@ import {
   Output,
   ViewChild,
   ViewEncapsulation,
-  numberAttribute
+  numberAttribute,
+  inject
 } from '@angular/core';
 
 import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
@@ -79,11 +80,10 @@ export class NzAvatarComponent implements OnChanges, AfterViewInit {
 
   @ViewChild('textEl', { static: false }) textEl?: ElementRef<HTMLSpanElement>;
 
-  private el: HTMLElement = this.elementRef.nativeElement;
+  private el: HTMLElement = inject(ElementRef).nativeElement;
 
   constructor(
     public nzConfigService: NzConfigService,
-    private elementRef: ElementRef,
     private cdr: ChangeDetectorRef
   ) {}
 

components/cascader/cascader.spec.ts

@@ -2279,9 +2279,11 @@ export class NzDemoCascaderStatusComponent {
   `
 })
 export class NzDemoCascaderInFormComponent {
-  validateForm = this.fb.group({
-    demo: this.fb.control<string[] | null>(null, Validators.required)
-  });
+  validateForm: FormGroup;
   public nzOptions: any[] | null = options1;
-  constructor(private fb: FormBuilder) {}
+  constructor(private fb: FormBuilder) {
+    this.validateForm = this.fb.group({
+      demo: this.fb.control<string[] | null>(null, Validators.required)
+    });
+  }
 }

components/cascader/demo/reactive-form.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy } from '@angular/core';
+import { Component, inject, OnDestroy } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { Subscription } from 'rxjs';
 
@@ -65,15 +65,15 @@ const options = [
   ]
 })
 export class NzDemoCascaderReactiveFormComponent implements OnDestroy {
+  private fb = inject(FormBuilder);
   form: FormGroup<{ name: FormControl<string[] | null> }> = this.fb.group({
     name: this.fb.control<string[] | null>(null, Validators.required)
   });
   nzOptions: NzCascaderOption[] = options;
   changeSubscription: Subscription;
 
-  constructor(private fb: FormBuilder) {
-    const control = this.form.controls.name;
-    this.changeSubscription = control.valueChanges.subscribe(data => {
+  constructor() {
+    this.changeSubscription = this.form.controls.name.valueChanges.subscribe(data => {
       this.onChanges(data);
     });
   }

components/cdk/overflow/overflow-container.component.ts

@@ -13,7 +13,8 @@ import {
   AfterContentInit,
   OnDestroy,
   ContentChild,
-  ChangeDetectorRef
+  ChangeDetectorRef,
+  inject
 } from '@angular/core';
 import { BehaviorSubject, combineLatest, Observable, ReplaySubject, Subject } from 'rxjs';
 import { filter, map, pairwise, startWith, switchMap, takeUntil, withLatestFrom } from 'rxjs/operators';
@@ -42,6 +43,9 @@ export class NzOverflowContainerComponent implements OnInit, AfterContentInit, O
   @ContentChild(NzOverflowRestDirective) overflowRest: NzOverflowRestDirective | undefined = undefined;
   overflowItems$ = new ReplaySubject<QueryList<NzOverflowItemDirective>>(1);
   destroy$ = new Subject<void>();
+
+  private nzResizeObserver = inject(NzResizeObserver);
+  private elementRef = inject(ElementRef);
   containerWidth$ = this.nzResizeObserver
     .observe(this.elementRef.nativeElement)
     .pipe(map(([item]) => item.target.clientWidth || 0));
@@ -69,11 +73,7 @@ export class NzOverflowContainerComponent implements OnInit, AfterContentInit, O
     }
   }
 
-  constructor(
-    private nzResizeObserver: NzResizeObserver,
-    private elementRef: ElementRef,
-    private cdr: ChangeDetectorRef
-  ) {}
+  constructor(private cdr: ChangeDetectorRef) {}
 
   ngOnInit(): void {
     const overflowItemsWidth$ = this.overflowItems$.pipe(

components/cdk/overflow/overflow-item.directive.ts

@@ -3,7 +3,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { ChangeDetectorRef, Directive, ElementRef } from '@angular/core';
+import { ChangeDetectorRef, Directive, ElementRef, inject } from '@angular/core';
 import { distinctUntilChanged, map, startWith, tap } from 'rxjs/operators';
 
 import { NzResizeObserver } from 'ng-zorro-antd/cdk/resize-observer';
@@ -16,6 +16,9 @@ import { NzResizeObserver } from 'ng-zorro-antd/cdk/resize-observer';
   standalone: true
 })
 export class NzOverflowItemDirective {
+  private nzResizeObserver = inject(NzResizeObserver);
+  private elementRef = inject(ElementRef);
+
   overflowStyle: { [key: string]: string | number | undefined } | undefined = undefined;
   itemWidth$ = this.nzResizeObserver.observe(this.elementRef.nativeElement).pipe(
     map(([item]) => (item.target as HTMLElement).offsetWidth),
@@ -26,11 +29,7 @@ export class NzOverflowItemDirective {
     })
   );
   itemWidth: number | undefined = undefined;
-  constructor(
-    private nzResizeObserver: NzResizeObserver,
-    public elementRef: ElementRef,
-    private cdr: ChangeDetectorRef
-  ) {}
+  constructor(private cdr: ChangeDetectorRef) {}
 
   setItemStyle(display: boolean, order: number): void {
     const mergedHidden = !display;

components/cdk/overflow/overflow-rest.directive.ts

@@ -3,7 +3,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { ChangeDetectorRef, Directive, ElementRef } from '@angular/core';
+import { ChangeDetectorRef, Directive, ElementRef, inject } from '@angular/core';
 import { map, startWith, tap } from 'rxjs/operators';
 
 import { NzResizeObserver } from 'ng-zorro-antd/cdk/resize-observer';
@@ -16,18 +16,17 @@ import { NzResizeObserver } from 'ng-zorro-antd/cdk/resize-observer';
   standalone: true
 })
 export class NzOverflowRestDirective {
+  private nzResizeObserver = inject(NzResizeObserver);
+  private elementRef = inject(ElementRef);
+
   restStyle: { [key: string]: string | number | undefined } | undefined = undefined;
   restWidth$ = this.nzResizeObserver.observe(this.elementRef.nativeElement).pipe(
     map(([item]) => (item.target as HTMLElement).offsetWidth),
     startWith(0),
     tap(width => (this.restWidth = width))
   );
   restWidth = 0;
-  constructor(
-    private nzResizeObserver: NzResizeObserver,
-    private elementRef: ElementRef,
-    private cdr: ChangeDetectorRef
-  ) {}
+  constructor(private cdr: ChangeDetectorRef) {}
 
   setRestStyle(display: boolean, order: number): void {
     const mergedHidden = !display;

components/cdk/overflow/overflow-suffix.directive.ts

@@ -3,7 +3,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { ChangeDetectorRef, Directive, ElementRef } from '@angular/core';
+import { ChangeDetectorRef, Directive, ElementRef, inject } from '@angular/core';
 import { map, tap } from 'rxjs/operators';
 
 import { NzResizeObserver } from 'ng-zorro-antd/cdk/resize-observer';
@@ -16,17 +16,16 @@ import { NzResizeObserver } from 'ng-zorro-antd/cdk/resize-observer';
   standalone: true
 })
 export class NzOverflowSuffixDirective {
+  private nzResizeObserver = inject(NzResizeObserver);
+  private elementRef = inject(ElementRef);
+
   suffixStyle = {};
   suffixWidth$ = this.nzResizeObserver.observe(this.elementRef.nativeElement).pipe(
     map(([item]) => (item.target as HTMLElement).offsetWidth),
     tap(width => (this.suffixWidth = width))
   );
   suffixWidth = 0;
-  constructor(
-    private nzResizeObserver: NzResizeObserver,
-    private elementRef: ElementRef,
-    private cdr: ChangeDetectorRef
-  ) {}
+  constructor(private cdr: ChangeDetectorRef) {}
 
   setSuffixStyle(start: number | null, order: number): void {
     if (start !== null) {

components/color-picker/color-picker.component.ts

@@ -11,6 +11,7 @@ import {
   Component,
   EventEmitter,
   forwardRef,
+  inject,
   Input,
   OnChanges,
   OnDestroy,
@@ -136,18 +137,14 @@ export class NzColorPickerComponent implements OnInit, OnChanges, ControlValueAc
   @Output() readonly nzOnClear = new EventEmitter<boolean>();
   @Output() readonly nzOnOpenChange = new EventEmitter<boolean>();
 
-  protected readonly isTemplateRef = isTemplateRef;
-  protected readonly isNonEmptyString = isNonEmptyString;
+  private formBuilder = inject(FormBuilder);
   private destroy$ = new Subject<void>();
   private isNzDisableFirstChange: boolean = true;
   blockColor: string = '';
   clearColor: boolean = false;
   showText: string = defaultColor.toHexString();
 
-  constructor(
-    private formBuilder: FormBuilder,
-    private cdr: ChangeDetectorRef
-  ) {}
+  constructor(private cdr: ChangeDetectorRef) {}
 
   formControl = this.formBuilder.control('');
 

components/color-picker/demo/use.ts

@@ -1,5 +1,5 @@
-import { Component } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/forms';
+import { Component, inject } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 
 @Component({
   selector: 'nz-demo-color-picker-use',
@@ -8,7 +8,7 @@ import { FormBuilder, Validators } from '@angular/forms';
       <nz-form-item>
         <nz-form-label [nzSpan]="4">name</nz-form-label>
         <nz-form-control [nzSpan]="16">
-          <input nz-input formControlName="userName" />
+          <input nz-input formControlName="username" />
         </nz-form-control>
       </nz-form-item>
       <nz-form-item>
@@ -26,13 +26,15 @@ import { FormBuilder, Validators } from '@angular/forms';
   `
 })
 export class NzDemoColorPickerUseComponent {
-  validateForm = this.formBuilder.group({
-    userName: ['color-picker', [Validators.required]],
+  private fb = inject(FormBuilder);
+  validateForm: FormGroup<{
+    username: FormControl<string | null>;
+    colorPicker: FormControl<string | null>;
+  }> = this.fb.group({
+    username: ['color-picker', [Validators.required]],
     colorPicker: ['#1677ff']
   });
 
-  constructor(private formBuilder: FormBuilder) {}
-
   submitForm(): void {
     console.log(this.validateForm.value);
   }

components/cron-expression/demo/use.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 
 @Component({
@@ -8,7 +8,7 @@ import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'
       <nz-form-item>
         <nz-form-label [nzSpan]="6">name</nz-form-label>
         <nz-form-control [nzSpan]="14">
-          <input nz-input formControlName="userName" />
+          <input nz-input formControlName="username" />
         </nz-form-control>
       </nz-form-item>
       <nz-form-item>
@@ -32,18 +32,17 @@ import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'
   `
 })
 export class NzDemoCronExpressionUseComponent {
+  private fb = inject(FormBuilder);
   validateForm: FormGroup<{
-    userName: FormControl<string | null>;
+    username: FormControl<string | null>;
     cronLinux: FormControl<string | null>;
     cronSpring: FormControl<string | null>;
   }> = this.fb.group({
-    userName: ['cron-expression', [Validators.required]],
+    username: ['cron-expression', [Validators.required]],
     cronLinux: ['* 1 * * *', [Validators.required]],
     cronSpring: ['0 * 1 * * *', [Validators.required]]
   });
 
-  constructor(private fb: FormBuilder) {}
-
   submitForm(): void {
     console.log(this.validateForm.value);
   }

components/date-picker/date-picker.component.spec.ts

@@ -1599,9 +1599,11 @@ class NzTestDatePickerStatusComponent {
   `
 })
 class NzTestDatePickerInFormComponent {
-  validateForm = this.fb.group({
-    demo: this.fb.control<Date | null>(null, Validators.required)
-  });
+  validateForm: FormGroup;
 
-  constructor(private fb: FormBuilder) {}
+  constructor(private fb: FormBuilder) {
+    this.validateForm = this.fb.group({
+      demo: this.fb.control<Date | null>(null, Validators.required)
+    });
+  }
 }

components/date-picker/lib/abstract-table.ts

@@ -52,8 +52,6 @@ export abstract class AbstractTable implements OnInit, OnChanges {
     }
   }
 
-
-
   hasRangeValue(): boolean {
     return this.selectedValue?.length > 0 || this.hoverValue?.length > 0;
   }

components/date-picker/lib/date-table.component.ts

@@ -4,11 +4,11 @@
  */
 
 import { NgClass, NgSwitch, NgTemplateOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, ViewEncapsulation } from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject, OnChanges, OnInit, ViewEncapsulation} from '@angular/core';
 
 import { CandyDate } from 'ng-zorro-antd/core/time';
 import { isNonEmptyString, isTemplateRef, valueFunctionProp } from 'ng-zorro-antd/core/util';
-import { DateHelperService, NzCalendarI18nInterface, NzI18nService } from 'ng-zorro-antd/i18n';
+import { DateHelperService, NzI18nService } from 'ng-zorro-antd/i18n';
 
 import { AbstractTable } from './abstract-table';
 import { DateBodyRow, DateCell } from './interface';
@@ -25,11 +25,8 @@ import { transCompatFormat } from './util';
   imports: [NgClass, NgSwitch, NgTemplateOutlet]
 })
 export class DateTableComponent extends AbstractTable implements OnChanges, OnInit {
-  @Input() override locale!: NzCalendarI18nInterface;
-
-  constructor(private i18n: NzI18nService, private dateHelper: DateHelperService) {
-    super();
-  }
+  private i18n = inject(NzI18nService);
+  private dateHelper = inject(DateHelperService);
 
   private changeValueFromInside(value: CandyDate): void {
     // Only change date not change time