refactor(module:*): remove ngClass and ngStyle

NG-ZORRO · Nov 25, 2024 · d67bdff · d67bdff
1 parent 4498af0
commit d67bdff
Show file tree

Hide file tree

Showing 60 changed files with 150 additions and 239 deletions.
diff --git a/components/anchor/anchor.component.ts b/components/anchor/anchor.component.ts
@@ -4,7 +4,7 @@
  */
 
 import { normalizePassiveListenerOptions, Platform } from '@angular/cdk/platform';
-import { DOCUMENT, NgClass, NgIf, NgStyle, NgTemplateOutlet } from '@angular/common';
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import {
   AfterViewInit,
   booleanAttribute,
@@ -53,7 +53,7 @@ const passiveEventListenerOptions = normalizePassiveListenerOptions({ passive: t
   exportAs: 'nzAnchor',
   preserveWhitespaces: false,
   standalone: true,
-  imports: [NgClass, NgIf, NgStyle, NgTemplateOutlet, NzAffixModule],
+  imports: [NgTemplateOutlet, NzAffixModule],
   template: `
     @if (nzAffix) {
       <nz-affix [nzOffsetTop]="nzOffsetTop" [nzTarget]="container">
@@ -66,10 +66,10 @@ const passiveEventListenerOptions = normalizePassiveListenerOptions({ passive: t
     <ng-template #content>
       <div
         class="ant-anchor-wrapper"
-        [ngClass]="{ 'ant-anchor-wrapper-horizontal': nzDirection === 'horizontal' }"
-        [ngStyle]="wrapperStyle"
+        [class]="{ 'ant-anchor-wrapper-horizontal': nzDirection === 'horizontal' }"
+        [style]="wrapperStyle"
       >
-        <div class="ant-anchor" [ngClass]="{ 'ant-anchor-fixed': !nzAffix && !nzShowInkInFixed }">
+        <div class="ant-anchor" [class]="{ 'ant-anchor-fixed': !nzAffix && !nzShowInkInFixed }">
           <div class="ant-anchor-ink">
             <div class="ant-anchor-ink-ball" #ink></div>
           </div>

diff --git a/components/auto-complete/autocomplete.component.ts b/components/auto-complete/autocomplete.component.ts
@@ -5,7 +5,7 @@
 
 import { AnimationEvent } from '@angular/animations';
 import { Direction, Directionality } from '@angular/cdk/bidi';
-import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import {
   AfterContentInit,
   AfterViewInit,
@@ -66,16 +66,16 @@ function normalizeDataSource(value: AutocompleteDataSource): AutocompleteDataSou
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [NgClass, NgStyle, NgTemplateOutlet, NzAutocompleteOptionComponent, NzNoAnimationDirective],
+  imports: [NgTemplateOutlet, NzAutocompleteOptionComponent, NzNoAnimationDirective],
   template: `
     <ng-template>
       <div
         #panel
         class="ant-select-dropdown ant-select-dropdown-placement-bottomLeft"
         [class.ant-select-dropdown-hidden]="!showPanel"
         [class.ant-select-dropdown-rtl]="dir === 'rtl'"
-        [ngClass]="nzOverlayClassName"
-        [ngStyle]="nzOverlayStyle"
+        [class]="nzOverlayClassName"
+        [style]="nzOverlayStyle"
         [nzNoAnimation]="noAnimation?.nzNoAnimation"
         @slideMotion
         (@slideMotion.done)="onAnimationEvent($event)"

diff --git a/components/avatar/avatar.component.ts b/components/avatar/avatar.component.ts
@@ -20,7 +20,7 @@ import {
 } from '@angular/core';
 
 import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
-import { NgClassInterface, NzShapeSCType, NzSizeLDSType } from 'ng-zorro-antd/core/types';
+import { NzShapeSCType, NzSizeLDSType } from 'ng-zorro-antd/core/types';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 
 const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'avatar';
@@ -72,7 +72,6 @@ export class NzAvatarComponent implements OnChanges {
   hasText: boolean = false;
   hasSrc: boolean = true;
   hasIcon: boolean = false;
-  classMap: NgClassInterface = {};
   customSize: string | null = null;
 
   @ViewChild('textEl', { static: false }) textEl?: ElementRef<HTMLSpanElement>;

diff --git a/components/avatar/demo/dynamic.ts b/components/avatar/demo/dynamic.ts
@@ -1,4 +1,3 @@
-import { NgStyle } from '@angular/common';
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
@@ -12,7 +11,7 @@ const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
 @Component({
   standalone: true,
   selector: 'nz-demo-avatar-dynamic',
-  imports: [FormsModule, NgStyle, NzAvatarModule, NzButtonModule, NzInputNumberModule],
+  imports: [FormsModule, NzAvatarModule, NzButtonModule, NzInputNumberModule],
   template: `
     <div>
       <label>
@@ -26,7 +25,7 @@ const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
 
     <nz-avatar
       [nzGap]="gap"
-      [ngStyle]="{ 'background-color': color }"
+      [style]="{ 'background-color': color }"
       [nzText]="text"
       nzSize="large"
       style="vertical-align: middle;"

diff --git a/components/badge/badge.component.ts b/components/badge/badge.component.ts
@@ -4,7 +4,6 @@
  */
 
 import { Direction, Directionality } from '@angular/cdk/bidi';
-import { NgStyle } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -44,13 +43,13 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'badge';
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [zoomBadgeMotion],
   standalone: true,
-  imports: [NgStyle, NzBadgeSupComponent, NzOutletModule],
+  imports: [NzBadgeSupComponent, NzOutletModule],
   template: `
     @if (nzStatus || nzColor) {
       <span
         class="ant-badge-status-dot ant-badge-status-{{ nzStatus || presetColor }}"
         [style.background]="!presetColor && nzColor"
-        [ngStyle]="nzStyle"
+        [style]="nzStyle"
       ></span>
       <span class="ant-badge-status-text">
         <ng-container *nzStringTemplateOutlet="nzText">{{ nzText }}</ng-container>

diff --git a/components/card/card.component.ts b/components/card/card.component.ts
@@ -4,7 +4,7 @@
  */
 
 import { Direction, Directionality } from '@angular/cdk/bidi';
-import { NgStyle, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -65,7 +65,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'card';
       </div>
     }
 
-    <div class="ant-card-body" [ngStyle]="nzBodyStyle">
+    <div class="ant-card-body" [style]="nzBodyStyle">
       @if (nzLoading) {
         <nz-skeleton [nzActive]="true" [nzTitle]="false" [nzParagraph]="{ rows: 4 }"></nz-skeleton>
       } @else {
@@ -93,7 +93,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'card';
     '[class.ant-card-contain-tabs]': '!!listOfNzCardTabComponent',
     '[class.ant-card-rtl]': `dir === 'rtl'`
   },
-  imports: [NzOutletModule, NgTemplateOutlet, NgStyle, NzSkeletonModule],
+  imports: [NzOutletModule, NgTemplateOutlet, NzSkeletonModule],
   standalone: true
 })
 export class NzCardComponent implements OnDestroy, OnInit {

diff --git a/components/cascader/cascader.component.ts b/components/cascader/cascader.component.ts
@@ -7,7 +7,7 @@ import { Direction, Directionality } from '@angular/cdk/bidi';
 import { BACKSPACE, DOWN_ARROW, ENTER, ESCAPE, LEFT_ARROW, RIGHT_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
 import { CdkConnectedOverlay, ConnectionPositionPair, OverlayModule } from '@angular/cdk/overlay';
 import { _getEventTarget } from '@angular/cdk/platform';
-import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -47,7 +47,6 @@ import { DEFAULT_CASCADER_POSITIONS, NzOverlayModule } from 'ng-zorro-antd/core/
 import { NzDestroyService } from 'ng-zorro-antd/core/services';
 import {
   NgClassInterface,
-  NgClassType,
   NgStyleInterface,
   NzSafeAny,
   NzSizeLDSType,
@@ -166,8 +165,8 @@ const defaultDisplayRender = (labels: string[]): string => labels.join(' / ');
             [class.ant-cascader-rtl]="dir === 'rtl'"
             [class.ant-cascader-menus-hidden]="!menuVisible"
             [class.ant-cascader-menu-empty]="shouldShowEmpty"
-            [ngClass]="menuCls"
-            [ngStyle]="nzMenuStyle"
+            [class]="nzMenuClassName"
+            [style]="nzMenuStyle"
           >
             @if (shouldShowEmpty) {
               <ul class="ant-cascader-menu" [style.width]="dropdownWidthStyle" [style.height]="dropdownHeightStyle">
@@ -184,7 +183,7 @@ const defaultDisplayRender = (labels: string[]): string => labels.join(' / ');
                 <ul
                   class="ant-cascader-menu"
                   role="menuitemcheckbox"
-                  [ngClass]="menuColumnCls"
+                  [class]="nzColumnClassName"
                   [style.height]="dropdownHeightStyle"
                   [style.width]="dropdownWidthStyle"
                 >
@@ -247,8 +246,6 @@ const defaultDisplayRender = (labels: string[]): string => labels.join(' / ');
     NzFormPatchModule,
     NzOverlayModule,
     NzNoAnimationDirective,
-    NgClass,
-    NgStyle,
     NzEmptyModule,
     NzCascaderOptionComponent
   ],
@@ -379,14 +376,6 @@ export class NzCascaderComponent
     return this.inputString;
   }
 
-  get menuCls(): NgClassType {
-    return { [`${this.nzMenuClassName}`]: !!this.nzMenuClassName };
-  }
-
-  get menuColumnCls(): NgClassType {
-    return { [`${this.nzColumnClassName}`]: !!this.nzColumnClassName };
-  }
-
   private get hasInput(): boolean {
     return !!this.inputValue;
   }

diff --git a/components/cascader/cascader.spec.ts b/components/cascader/cascader.spec.ts
@@ -2159,7 +2159,7 @@ const options5: NzSafeAny[] = [];
     ></nz-cascader>
 
     <ng-template #renderTpl let-labels="labels" let-selectedOptions="selectedOptions">
-      @for (label of labels; track labels) {
+      @for (label of labels; track label) {
         {{ label }}{{ $last ? '' : ' | ' }}
       }
     </ng-template>

diff --git a/components/collapse/demo/custom.ts b/components/collapse/demo/custom.ts
@@ -1,4 +1,3 @@
-import { NgStyle } from '@angular/common';
 import { Component } from '@angular/core';
 
 import { NzCollapseModule } from 'ng-zorro-antd/collapse';
@@ -14,15 +13,15 @@ interface Panel {
 @Component({
   selector: 'nz-demo-collapse-custom',
   standalone: true,
-  imports: [NgStyle, NzIconModule, NzCollapseModule],
+  imports: [NzIconModule, NzCollapseModule],
   template: `
     <nz-collapse [nzBordered]="false">
       @for (panel of panels; track panel) {
         <nz-collapse-panel
           #p
           [nzHeader]="panel.name"
           [nzActive]="panel.active"
-          [ngStyle]="customStyle"
+          [style]="customStyle"
           [nzExpandedIcon]="!$first ? panel.icon || expandedIcon : undefined"
         >
           <p>{{ panel.name }} content</p>

diff --git a/components/color-picker/src/components/slider.component.ts b/components/color-picker/src/components/slider.component.ts
@@ -3,7 +3,7 @@
  * found in the LICENSE file at /~https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { DOCUMENT, NgClass } from '@angular/common';
+import { DOCUMENT } from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectorRef,
@@ -42,14 +42,14 @@ function getPosition(e: EventType): { pageX: number; pageY: number } {
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'color-slider',
   standalone: true,
-  imports: [PaletteComponent, GradientComponent, HandlerComponent, NgClass],
+  imports: [PaletteComponent, GradientComponent, HandlerComponent],
   template: `
     <div
       #slider
       (mousedown)="dragStartHandle($event)"
       (touchstart)="dragStartHandle($event)"
       class="ant-color-picker-slider"
-      [ngClass]="'ant-color-picker-slider-' + type"
+      [class]="'ant-color-picker-slider-' + type"
     >
       <color-palette>
         <div

diff --git 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, NgStyle, NgTemplateOutlet } from '@angular/common';
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import {
   AfterViewInit,
   booleanAttribute,
@@ -166,7 +166,7 @@ export type NzPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
 
     <!-- Right operator icons -->
     <ng-template #tplRightRest>
-      <div class="{{ prefixCls }}-active-bar" [ngStyle]="activeBarStyle"></div>
+      <div class="{{ prefixCls }}-active-bar" [style]="activeBarStyle"></div>
       @if (showClear) {
         <span class="{{ prefixCls }}-clear" (click)="onClickClear($event)">
           <span nz-icon nzType="close-circle" nzTheme="fill"></span>
@@ -194,7 +194,7 @@ export type NzPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
         [class.ant-picker-dropdown-range]="isRange"
         [class.ant-picker-active-left]="datePickerService.activeInput === 'left'"
         [class.ant-picker-active-right]="datePickerService.activeInput === 'right'"
-        [ngStyle]="nzPopupStyle"
+        [style]="nzPopupStyle"
       >
         <date-range-popup
           [isRange]="isRange"
@@ -270,7 +270,6 @@ export type NzPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
     NgTemplateOutlet,
     NzOutletModule,
     NzIconModule,
-    NgStyle,
     NzFormPatchModule,
     DateRangePopupComponent,
     CdkConnectedOverlay,

diff --git 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 { NgStyle, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import {
   booleanAttribute,
   ChangeDetectionStrategy,
@@ -61,7 +61,7 @@ import { getTimeConfig, isAllowedDate, PREFIX_CLASS } from './util';
   template: `
     @if (isRange) {
       <div class="{{ prefixCls }}-range-wrapper {{ prefixCls }}-date-range-wrapper">
-        <div class="{{ prefixCls }}-range-arrow" [ngStyle]="arrowPosition"></div>
+        <div class="{{ prefixCls }}-range-arrow" [style]="arrowPosition"></div>
         <div class="{{ prefixCls }}-panel-container {{ showWeek ? prefixCls + '-week-number' : '' }}">
           <div class="{{ prefixCls }}-panels">
             @if (hasTimePicker) {
@@ -145,7 +145,7 @@ import { getTimeConfig, isAllowedDate, PREFIX_CLASS } from './util';
       }
     </ng-template>
   `,
-  imports: [InnerPopupComponent, NgTemplateOutlet, CalendarFooterComponent, NgStyle],
+  imports: [InnerPopupComponent, NgTemplateOutlet, CalendarFooterComponent],
   standalone: true
 })
 export class DateRangePopupComponent implements OnInit, OnChanges, OnDestroy {

diff --git a/components/date-picker/lib/abstract-table.html b/components/date-picker/lib/abstract-table.html
@@ -14,15 +14,15 @@
 
   <tbody>
     @for (row of bodyRows; track row.trackByIndex) {
-      <tr [ngClass]="row.classMap!" role="row">
+      <tr [class]="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!"
+            [class]="cell.classMap!"
             (click)="cell.isDisabled ? null : cell.onClick()"
             (mouseenter)="cell.onMouseEnter()">
             @switch (prefixCls) {

diff --git a/components/date-picker/lib/date-header.component.ts b/components/date-picker/lib/date-header.component.ts
@@ -3,24 +3,22 @@
  * found in the LICENSE file at /~https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { NgClass, NgForOf, NgIf } from '@angular/common';
 import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 
 import { DateHelperService } from 'ng-zorro-antd/i18n';
 
+import { NzDateMode } from '../standard-types';
 import { AbstractPanelHeader } from './abstract-panel-header';
 import { PanelSelector } from './interface';
 import { transCompatFormat } from './util';
-import { NzDateMode } from '../standard-types';
 
 @Component({
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'date-header', // eslint-disable-line @angular-eslint/component-selector
   exportAs: 'dateHeader',
   templateUrl: './abstract-panel-header.html',
-  standalone: true,
-  imports: [NgForOf, NgIf, NgClass]
+  standalone: true
 })
 export class DateHeaderComponent extends AbstractPanelHeader {
   override mode: NzDateMode = 'date';

diff --git a/components/date-picker/lib/date-table.component.ts b/components/date-picker/lib/date-table.component.ts
@@ -3,7 +3,6 @@
  * found in the LICENSE file at /~https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { NgClass } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, ViewEncapsulation } from '@angular/core';
 
 import { CandyDate } from 'ng-zorro-antd/core/time';
@@ -23,7 +22,7 @@ import { transCompatFormat } from './util';
   exportAs: 'dateTable',
   templateUrl: './abstract-table.html',
   standalone: true,
-  imports: [NgClass, NzStringTemplateOutletDirective]
+  imports: [NzStringTemplateOutletDirective]
 })
 export class DateTableComponent extends AbstractTable implements OnChanges, OnInit {
   @Input() override locale!: NzCalendarI18nInterface;