refactor(module:*): remove ngClass and ngStyle (#1852)

packages/abc/avatar-list/avatar-list.component.html

@@ -1,6 +1,6 @@
 <ul class="avatar-list__wrap">
   @for (i of items; track $index) {
-    <li [ngClass]="cls">
+    <li [class]="cls">
       @if (i.tips) {
         <nz-avatar
           nz-tooltip
@@ -16,8 +16,8 @@
     </li>
   }
   @if (exceedCount > 0) {
-    <li [ngClass]="cls">
-      <nz-avatar [nzSize]="avatarSize" style="cursor: auto" [ngStyle]="excessItemsStyle" [nzText]="'+' + exceedCount" />
+    <li [class]="cls">
+      <nz-avatar [nzSize]="avatarSize" style="cursor: auto" [style]="excessItemsStyle" [nzText]="'+' + exceedCount" />
     </li>
   }
 </ul>

packages/abc/avatar-list/avatar-list.component.ts

@@ -1,5 +1,4 @@
 import { Direction, Directionality } from '@angular/cdk/bidi';
-import { NgClass, NgStyle } from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -37,7 +36,7 @@ import { AvatarListItemComponent } from './avatar-list-item.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [NgStyle, NgClass, NzAvatarComponent, NzTooltipDirective]
+  imports: [NzAvatarComponent, NzTooltipDirective]
 })
 export class AvatarListComponent implements AfterViewInit, OnChanges {
   private readonly cdr = inject(ChangeDetectorRef);

packages/abc/ellipsis/ellipsis.component.html

@@ -15,7 +15,7 @@
 </ng-template>
 @switch (type) {
   @case ('default') {
-    <span [ngClass]="cls"></span>
+    <span [class]="cls"></span>
   }
   @case ('length') {
     <ng-template [ngTemplateOutlet]="tooltipTpl" [ngTemplateOutletContext]="{ $implicit: lengthTpl }" />
@@ -24,11 +24,11 @@
   @case ('line-clamp') {
     <ng-template [ngTemplateOutlet]="tooltipTpl" [ngTemplateOutletContext]="{ $implicit: lineClampTpl }" />
     <ng-template #lineClampTpl>
-      <div [ngClass]="cls" [ngStyle]="{ '-webkit-line-clamp': lines, '-webkit-box-orient': 'vertical' }"></div>
+      <div [class]="cls" [style]="{ '-webkit-line-clamp': lines, '-webkit-box-orient': 'vertical' }"></div>
     </ng-template>
   }
   @case ('line') {
-    <div [ngClass]="cls">
+    <div [class]="cls">
       <div class="ellipsis__handle">
         <ng-template [ngTemplateOutlet]="tooltipTpl" [ngTemplateOutletContext]="{ $implicit: lineTpl }" />
         <ng-template #lineTpl>{{ linsWord }}</ng-template>

packages/abc/ellipsis/ellipsis.component.ts

@@ -1,5 +1,5 @@
 import { CdkObserveContent } from '@angular/cdk/observers';
-import { DOCUMENT, NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -29,7 +29,7 @@ import { NzTooltipDirective } from 'ng-zorro-antd/tooltip';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [CdkObserveContent, NzTooltipDirective, NgTemplateOutlet, NgClass, NgStyle]
+  imports: [CdkObserveContent, NzTooltipDirective, NgTemplateOutlet]
 })
 export class EllipsisComponent implements AfterViewInit, OnChanges {
   private readonly el: HTMLElement = inject(ElementRef).nativeElement;

packages/abc/loading/loading.component.html

@@ -8,7 +8,7 @@
         <i nz-icon [nzType]="icon.type!" [nzTheme]="icon.theme!" [nzSpin]="icon.spin"></i>
       }
       @default {
-        <div class="loading-default__custom" [ngStyle]="custom.style!" [innerHTML]="custom.html"></div>
+        <div class="loading-default__custom" [style]="custom.style!" [innerHTML]="custom.html"></div>
       }
     }
   </div>

packages/abc/loading/loading.component.ts

@@ -1,5 +1,4 @@
 import { Direction } from '@angular/cdk/bidi';
-import { NgStyle } from '@angular/common';
 import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 
 import { NzIconDirective } from 'ng-zorro-antd/icon';
@@ -18,7 +17,7 @@ import { LoadingCustom, LoadingIcon, LoadingShowOptions } from './loading.types'
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [NzSpinComponent, NzIconDirective, NgStyle]
+  imports: [NzSpinComponent, NzIconDirective]
 })
 export class LoadingDefaultComponent {
   options!: LoadingShowOptions;

packages/abc/notice-icon/notice-icon.component.html

@@ -1,6 +1,6 @@
 <ng-template #badgeTpl>
-  <nz-badge [nzCount]="count" [ngClass]="btnClass!" [nzStyle]="{ 'box-shadow': 'none' }">
-    <i nz-icon nzType="bell" [ngClass]="btnIconClass!"></i>
+  <nz-badge [nzCount]="count" [class]="btnClass!" [nzStyle]="{ 'box-shadow': 'none' }">
+    <i nz-icon nzType="bell" [class]="btnIconClass!"></i>
   </nz-badge>
 </ng-template>
 @if (data!.length <= 0) {

packages/abc/notice-icon/notice-icon.component.ts

@@ -1,4 +1,4 @@
-import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -37,7 +37,6 @@ import { NoticeIconSelect, NoticeItem } from './notice-icon.types';
   encapsulation: ViewEncapsulation.None,
   standalone: true,
   imports: [
-    NgClass,
     NgTemplateOutlet,
     NzBadgeComponent,
     NzIconDirective,

packages/abc/quick-menu/quick-menu.component.html

@@ -1,5 +1,5 @@
 <div class="quick-menu__inner">
-  <div class="quick-menu__ctrl" [ngStyle]="ctrlStyle">
+  <div class="quick-menu__ctrl" [style]="ctrlStyle">
     <div class="quick-menu__ctrl-icon">
       <ng-container *nzStringTemplateOutlet="icon">
         <i nz-icon [nzType]="$any(icon)"></i>

packages/abc/quick-menu/quick-menu.component.ts

@@ -1,4 +1,3 @@
-import { NgStyle } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -32,7 +31,7 @@ import { NzIconDirective } from 'ng-zorro-antd/icon';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [NgStyle, NzIconDirective, NzStringTemplateOutletDirective]
+  imports: [NzIconDirective, NzStringTemplateOutletDirective]
 })
 export class QuickMenuComponent implements OnInit, OnChanges {
   private readonly cdr = inject(ChangeDetectorRef);

packages/abc/se/se.component.html

@@ -1,10 +1,6 @@
 <div class="ant-form-item-label" [class.se__nolabel]="hideLabel || !label" [style.width.px]="_labelWidth">
   @if (label) {
-    <label
-      [attr.for]="_id"
-      class="se__label"
-      [ngClass]="{ 'ant-form-item-required': required, 'se__no-colon': _noColon }"
-    >
+    <label [attr.for]="_id" class="se__label" [class.ant-form-item-required]="required" [class.se__no-colon]="_noColon">
       <span class="se__label-text">
         <ng-container *nzStringTemplateOutlet="label">{{ label }}</ng-container>
       </span>

packages/abc/se/se.component.ts

@@ -1,5 +1,4 @@
 import { CdkObserveContent } from '@angular/cdk/observers';
-import { NgClass } from '@angular/common';
 import {
   AfterContentInit,
   AfterViewInit,
@@ -55,7 +54,7 @@ let nextUniqueId = 0;
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [NgClass, NzStringTemplateOutletDirective, NzTooltipDirective, NzIconDirective, CdkObserveContent]
+  imports: [NzStringTemplateOutletDirective, NzTooltipDirective, NzIconDirective, CdkObserveContent]
 })
 export class SEComponent implements OnChanges, AfterContentInit, AfterViewInit {
   private readonly parentComp = inject(SEContainerComponent, { host: true, optional: true })!;

packages/abc/st/st-td.component.html

@@ -20,13 +20,13 @@
       [nzOkType]="pop.okType"
       (nzOnConfirm)="_btn(i)"
       class="st__btn-text"
-      [ngClass]="i._className"
+      [class]="i._className"
       (click)="_stopPropagation($event)"
     >
       <ng-template [ngTemplateOutlet]="btnTextTpl" [ngTemplateOutletContext]="{ $implicit: i }" />
     </a>
   } @else {
-    <a (click)="_btn(i, $event)" class="st__btn-text" [ngClass]="i._className">
+    <a (click)="_btn(i, $event)" class="st__btn-text" [class]="i._className">
       <ng-template [ngTemplateOutlet]="btnTextTpl" [ngTemplateOutletContext]="{ $implicit: i }" />
     </a>
   }
@@ -46,7 +46,7 @@
       ></i>
     }
   }
-  <span [innerHTML]="i._text" [ngClass]="{ 'pl-xs': i._icon }"></span>
+  <span [innerHTML]="i._text" [class.pl-xs]="i._icon"></span>
 </ng-template>
 @if (c.__render) {
   <ng-template [ngTemplateOutlet]="c.__render!" [ngTemplateOutletContext]="{ $implicit: i, index: index, column: c }" />

packages/abc/st/st.component.html

@@ -68,7 +68,7 @@
               [nzWidth]="$any(_c).width"
               [nzLeft]="_c._left!"
               [nzRight]="_c._right!"
-              [ngClass]="_c._className"
+              [class]="_c._className"
               [attr.data-col]="_c.indexKey"
               [attr.data-col-index]="index"
               [nzShowSort]="_c._sort.enabled"
@@ -154,7 +154,7 @@
         [attr.data-index]="index"
         (click)="_rowClick($event, i, index, false)"
         (dblclick)="_rowClick($event, i, index, true)"
-        [ngClass]="i._rowClassName"
+        [class]="i._rowClassName"
       >
         @if (expand) {
           <td
@@ -178,7 +178,7 @@
               [nzLeft]="!!c._left"
               [nzRight]="!!c._right"
               [attr.data-col-index]="cIdx"
-              [ngClass]="c._className"
+              [class]="c._className"
               [attr.colspan]="props?.colSpan === 1 ? null : props?.colSpan"
               [attr.rowspan]="props?.rowSpan === 1 ? null : props?.rowSpan"
             >

packages/abc/sv/sv-container.component.ts

@@ -1,4 +1,3 @@
-import { NgStyle } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -56,7 +55,7 @@ export class SVTitleComponent implements OnInit {
   selector: 'sv-container, [sv-container]',
   exportAs: 'svContainer',
   template: `
-    <div class="ant-row" [ngStyle]="margin">
+    <div class="ant-row" [style]="margin">
       @if (title) {
         <sv-title>
           <ng-container *nzStringTemplateOutlet="title">{{ title }}</ng-container>
@@ -78,7 +77,7 @@ export class SVTitleComponent implements OnInit {
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [NgStyle, SVTitleComponent, NzStringTemplateOutletDirective]
+  imports: [SVTitleComponent, NzStringTemplateOutletDirective]
 })
 export class SVContainerComponent {
   @Input({ alias: 'sv-container', transform: (v: unknown) => (v == null ? null : numberAttribute(v)) })
@@ -95,8 +94,8 @@ export class SVContainerComponent {
   @Input({ transform: booleanAttribute }) noColon = false;
   @Input({ transform: booleanAttribute }) bordered = false;
 
-  get margin(): { [k: string]: number } {
-    return this.bordered ? {} : { 'margin-left.px': -(this.gutter / 2), 'margin-right.px': -(this.gutter / 2) };
+  get margin(): { [k: string]: string } {
+    return this.bordered ? {} : { 'margin-left': `${-(this.gutter / 2)}px`, 'margin-right': `${-(this.gutter / 2)}px` };
   }
 
   constructor(configSrv: AlainConfigService) {

packages/chart/mini-progress/mini-progress.component.html

@@ -2,14 +2,14 @@
   nz-tooltip
   [nzTooltipTitle]="i18n.getData('miniProgress').target + target + '%'"
   class="g2-mini-progress__target"
-  [ngStyle]="{ 'left.%': target }"
+  [style]="{ left: target + '%' }"
 >
-  <span class="g2-mini-progress__target-item" [ngStyle]="{ 'background-color': color }"></span>
-  <span class="g2-mini-progress__target-item" [ngStyle]="{ 'background-color': color }"></span>
+  <span class="g2-mini-progress__target-item" [style]="{ 'background-color': color }"></span>
+  <span class="g2-mini-progress__target-item" [style]="{ 'background-color': color }"></span>
 </div>
 <div class="g2-mini-progress__wrap">
   <div
     class="g2-mini-progress__value"
-    [ngStyle]="{ 'background-color': color, 'width.%': percent, 'height.px': strokeWidth }"
+    [style]="{ 'background-color': color, width: percent + '%', height: strokeWidth + 'px' }"
   ></div>
 </div>

packages/chart/mini-progress/mini-progress.component.ts

@@ -1,4 +1,3 @@
-import { NgStyle } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -22,7 +21,7 @@ import { NzTooltipDirective } from 'ng-zorro-antd/tooltip';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [NzTooltipDirective, NgStyle]
+  imports: [NzTooltipDirective]
 })
 export class G2MiniProgressComponent implements OnChanges {
   readonly i18n = inject(DelonLocaleService);

packages/chart/pie/pie.component.html

@@ -26,7 +26,7 @@ <h4 class="g2-pie__total-title">
   <ul class="g2-pie__legend">
     @for (item of legendData; track $index) {
       <li (click)="_click($index)" class="g2-pie__legend-item">
-        <span class="g2-pie__legend-dot" [ngStyle]="{ 'background-color': !item.checked ? '#aaa' : item.color }"></span>
+        <span class="g2-pie__legend-dot" [style]="{ 'background-color': !item.checked ? '#aaa' : item.color }"></span>
         <span class="g2-pie__legend-title">{{ item.x }}</span>
         <nz-divider nzType="vertical" />
         <span class="g2-pie__legend-percent">{{ item.percent }}%</span>

packages/chart/pie/pie.component.ts

@@ -1,4 +1,3 @@
-import { NgStyle } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -55,7 +54,7 @@ export interface G2PieRatio {
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [NzSkeletonComponent, NzStringTemplateOutletDirective, NzDividerComponent, NgStyle]
+  imports: [NzSkeletonComponent, NzStringTemplateOutletDirective, NzDividerComponent]
 })
 export class G2PieComponent extends G2BaseComponent {
   private percentColor!: (value: string) => string;

packages/chart/radar/radar.component.html

@@ -9,7 +9,7 @@ <h4>{{ title }}</h4>
   <div nz-row class="g2-radar__legend">
     @for (i of legendData; track $index) {
       <div nz-col [nzSpan]="24 / legendData.length" (click)="_click($index)" class="g2-radar__legend-item">
-        <i class="g2-radar__legend-dot" [ngStyle]="{ 'background-color': !i.checked ? '#aaa' : i.color }"></i>
+        <i class="g2-radar__legend-dot" [style]="{ 'background-color': !i.checked ? '#aaa' : i.color }"></i>
         {{ i.name }}
         <h6 class="g2-radar__legend-title">{{ i.value }}</h6>
       </div>

packages/chart/radar/radar.component.ts

@@ -1,4 +1,3 @@
-import { NgStyle } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -43,7 +42,7 @@ export interface G2RadarClickItem {
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [NzSkeletonComponent, NzStringTemplateOutletDirective, NzRowDirective, NzColDirective, NgStyle]
+  imports: [NzSkeletonComponent, NzStringTemplateOutletDirective, NzRowDirective, NzColDirective]
 })
 export class G2RadarComponent extends G2BaseComponent {
   legendData: NzSafeAny[] = [];

packages/chart/water-wave/water-wave.component.html

@@ -1,7 +1,7 @@
-<div [ngStyle]="{ 'height.px': height, 'width.px': height, overflow: 'hidden' }">
-  <canvas #container class="g2-water-wave__canvas" width="{{ height * 2 }}" height="{{ height * 2 }}"></canvas>
+<div [style]="{ height: height + 'px', width: height + 'px', overflow: 'hidden' }">
+  <canvas #container class="g2-water-wave__canvas" [attr.width]="height * 2" [attr.height]="height * 2"></canvas>
 </div>
-<div class="g2-water-wave__desc" [ngStyle]="{ 'width.px': height }">
+<div class="g2-water-wave__desc" [style]="{ width: height + 'px' }">
   @if (title) {
     <span class="g2-water-wave__desc-title">
       <ng-container *nzStringTemplateOutlet="title">{{ title }}</ng-container>

packages/chart/water-wave/water-wave.component.ts

@@ -1,5 +1,4 @@
 import { Platform } from '@angular/cdk/platform';
-import { NgStyle } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -31,7 +30,7 @@ import { NzStringTemplateOutletDirective } from 'ng-zorro-antd/core/outlet';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [NgStyle, NzStringTemplateOutletDirective]
+  imports: [NzStringTemplateOutletDirective]
 })
 export class G2WaterWaveComponent implements OnDestroy, OnChanges, OnInit {
   private readonly el: HTMLElement = inject(ElementRef).nativeElement;

packages/form/src/sf.component.html

@@ -5,7 +5,7 @@
   @if (button !== 'none') {
     @let btnRender = _btn.render;
     @if (btnRender) {
-      <nz-form-item [ngClass]="btnRender.class!" class="sf-btns" [fixed-label]="btnRender.spanLabelFixed!">
+      <nz-form-item [class]="btnRender.class!" class="sf-btns" [fixed-label]="btnRender.spanLabelFixed!">
         <div
           nz-col
           class="ant-form-item-control"

packages/form/src/widgets/array/array.widget.ts

@@ -47,7 +47,7 @@ import { ArrayLayoutWidget } from '../../widget';
     <div nz-col class="ant-form-item-control-wrapper" [nzSpan]="ui.spanControl!" [nzOffset]="ui.offsetControl!">
       <div class="ant-form-item-control" [class.has-error]="showError">
         <div nz-row class="sf__array-container">
-          <ng-container *ngFor="let i of $any(formProperty).properties; let $index = index">
+          @for (i of $any(formProperty).properties; track $index) {
             @if (i.visible && !i.ui.hidden) {
               <div nz-col [nzSpan]="arraySpan" [attr.data-index]="$index" class="sf__array-item">
                 <nz-card>
@@ -60,7 +60,7 @@ import { ArrayLayoutWidget } from '../../widget';
                 </nz-card>
               </div>
             }
-          </ng-container>
+          }
         </div>
         @if (!ui.onlyVisual && showError) {
           <div class="ant-form-explain">{{ error }}</div>