From da3404e05f0c67b08b155e84974d4ac73e3677af Mon Sep 17 00:00:00 2001
From: cipchk <cipchk@qq.com>
Date: Mon, 25 Nov 2024 12:30:33 +0800
Subject: [PATCH] refactor(module:*): remove ngClass andngStyle

---
 .../abc/avatar-list/avatar-list.component.html     |  6 +++---
 packages/abc/avatar-list/avatar-list.component.ts  |  3 +--
 packages/abc/ellipsis/ellipsis.component.html      |  6 +++---
 packages/abc/ellipsis/ellipsis.component.ts        |  4 ++--
 packages/abc/loading/loading.component.html        |  2 +-
 packages/abc/loading/loading.component.ts          |  3 +--
 .../abc/notice-icon/notice-icon.component.html     |  4 ++--
 packages/abc/notice-icon/notice-icon.component.ts  |  3 +--
 packages/abc/quick-menu/quick-menu.component.html  |  2 +-
 packages/abc/quick-menu/quick-menu.component.ts    |  3 +--
 packages/abc/se/se.component.html                  |  6 +-----
 packages/abc/se/se.component.ts                    |  3 +--
 packages/abc/st/st-td.component.html               |  6 +++---
 packages/abc/st/st.component.html                  |  6 +++---
 packages/abc/sv/sv-container.component.ts          |  5 ++---
 .../mini-progress/mini-progress.component.html     |  8 ++++----
 .../chart/mini-progress/mini-progress.component.ts |  3 +--
 packages/chart/pie/pie.component.html              |  2 +-
 packages/chart/pie/pie.component.ts                |  3 +--
 packages/chart/radar/radar.component.html          |  2 +-
 packages/chart/radar/radar.component.ts            |  3 +--
 .../chart/water-wave/water-wave.component.html     |  4 ++--
 packages/chart/water-wave/water-wave.component.ts  |  3 +--
 packages/form/src/sf.component.html                |  2 +-
 packages/form/src/widgets/array/array.widget.ts    |  4 ++--
 packages/form/src/widgets/date/date.widget.ts      | 10 +++++-----
 .../form/src/widgets/number/number.widget.html     |  2 +-
 packages/form/src/widgets/number/number.widget.ts  |  2 +-
 .../theme/layout-default/layout-nav.component.html |  2 +-
 .../setting-drawer/setting-drawer.component.html   |  2 +-
 .../components/code-box/code-box.component.html    | 14 ++++++++------
 .../components/code-box/code-box.component.ts      |  3 +--
 .../shared/components/footer/footer.component.ts   |  3 +--
 33 files changed, 60 insertions(+), 74 deletions(-)

diff --git a/packages/abc/avatar-list/avatar-list.component.html b/packages/abc/avatar-list/avatar-list.component.html
index f39eacc01e..f59e202859 100644
--- a/packages/abc/avatar-list/avatar-list.component.html
+++ b/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>
diff --git a/packages/abc/avatar-list/avatar-list.component.ts b/packages/abc/avatar-list/avatar-list.component.ts
index 9619074be8..447977daa5 100644
--- a/packages/abc/avatar-list/avatar-list.component.ts
+++ b/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,
@@ -34,7 +33,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);
diff --git a/packages/abc/ellipsis/ellipsis.component.html b/packages/abc/ellipsis/ellipsis.component.html
index 90c453c456..f196352f4e 100644
--- a/packages/abc/ellipsis/ellipsis.component.html
+++ b/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>
diff --git a/packages/abc/ellipsis/ellipsis.component.ts b/packages/abc/ellipsis/ellipsis.component.ts
index 48cd254747..9f75d0374e 100644
--- a/packages/abc/ellipsis/ellipsis.component.ts
+++ b/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;
diff --git a/packages/abc/loading/loading.component.html b/packages/abc/loading/loading.component.html
index 2ac6e2a728..d337d25d7f 100644
--- a/packages/abc/loading/loading.component.html
+++ b/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>
diff --git a/packages/abc/loading/loading.component.ts b/packages/abc/loading/loading.component.ts
index c8f9bc81cb..f2757f9790 100644
--- a/packages/abc/loading/loading.component.ts
+++ b/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;
diff --git a/packages/abc/notice-icon/notice-icon.component.html b/packages/abc/notice-icon/notice-icon.component.html
index f3d08c05e5..4618475925 100644
--- a/packages/abc/notice-icon/notice-icon.component.html
+++ b/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) {
diff --git a/packages/abc/notice-icon/notice-icon.component.ts b/packages/abc/notice-icon/notice-icon.component.ts
index ebd438d738..204ac7eb84 100644
--- a/packages/abc/notice-icon/notice-icon.component.ts
+++ b/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,
diff --git a/packages/abc/quick-menu/quick-menu.component.html b/packages/abc/quick-menu/quick-menu.component.html
index e3342dbca6..a161d83a5f 100644
--- a/packages/abc/quick-menu/quick-menu.component.html
+++ b/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>
diff --git a/packages/abc/quick-menu/quick-menu.component.ts b/packages/abc/quick-menu/quick-menu.component.ts
index 5c3770b3f1..514aa2909b 100644
--- a/packages/abc/quick-menu/quick-menu.component.ts
+++ b/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);
diff --git a/packages/abc/se/se.component.html b/packages/abc/se/se.component.html
index 6b7ad7a950..0cd776f4ab 100644
--- a/packages/abc/se/se.component.html
+++ b/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>
diff --git a/packages/abc/se/se.component.ts b/packages/abc/se/se.component.ts
index ed9af19085..1a8c70a7fd 100644
--- a/packages/abc/se/se.component.ts
+++ b/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 })!;
diff --git a/packages/abc/st/st-td.component.html b/packages/abc/st/st-td.component.html
index 7589610d4a..db1f8ae0d0 100644
--- a/packages/abc/st/st-td.component.html
+++ b/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 }" />
diff --git a/packages/abc/st/st.component.html b/packages/abc/st/st.component.html
index e943156b70..af15a6eda2 100644
--- a/packages/abc/st/st.component.html
+++ b/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"
             >
diff --git a/packages/abc/sv/sv-container.component.ts b/packages/abc/sv/sv-container.component.ts
index 2f2bd065ef..3e75f538f5 100644
--- a/packages/abc/sv/sv-container.component.ts
+++ b/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)) })
diff --git a/packages/chart/mini-progress/mini-progress.component.html b/packages/chart/mini-progress/mini-progress.component.html
index 5728c4d824..9b703cda32 100644
--- a/packages/chart/mini-progress/mini-progress.component.html
+++ b/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.px': strokeWidth }"
   ></div>
 </div>
diff --git a/packages/chart/mini-progress/mini-progress.component.ts b/packages/chart/mini-progress/mini-progress.component.ts
index 26c4f29dc0..5187373f7c 100644
--- a/packages/chart/mini-progress/mini-progress.component.ts
+++ b/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);
diff --git a/packages/chart/pie/pie.component.html b/packages/chart/pie/pie.component.html
index 0363299871..a1ce2a4bf4 100644
--- a/packages/chart/pie/pie.component.html
+++ b/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>
diff --git a/packages/chart/pie/pie.component.ts b/packages/chart/pie/pie.component.ts
index 6c7e4f2cd0..65b53fd31c 100644
--- a/packages/chart/pie/pie.component.ts
+++ b/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;
diff --git a/packages/chart/radar/radar.component.html b/packages/chart/radar/radar.component.html
index 3a056bb0af..842d77ab63 100644
--- a/packages/chart/radar/radar.component.html
+++ b/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>
diff --git a/packages/chart/radar/radar.component.ts b/packages/chart/radar/radar.component.ts
index a702056610..fae5c69347 100644
--- a/packages/chart/radar/radar.component.ts
+++ b/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[] = [];
diff --git a/packages/chart/water-wave/water-wave.component.html b/packages/chart/water-wave/water-wave.component.html
index 43b53b1b64..81141966df 100644
--- a/packages/chart/water-wave/water-wave.component.html
+++ b/packages/chart/water-wave/water-wave.component.html
@@ -1,7 +1,7 @@
-<div [ngStyle]="{ 'height.px': height, 'width.px': height, overflow: 'hidden' }">
+<div [style]="{ 'height.px': height, 'width.px': height, overflow: 'hidden' }">
   <canvas #container class="g2-water-wave__canvas" width="{{ height * 2 }}" height="{{ height * 2 }}"></canvas>
 </div>
-<div class="g2-water-wave__desc" [ngStyle]="{ 'width.px': height }">
+<div class="g2-water-wave__desc" [style]="{ 'width.px': height }">
   @if (title) {
     <span class="g2-water-wave__desc-title">
       <ng-container *nzStringTemplateOutlet="title">{{ title }}</ng-container>
diff --git a/packages/chart/water-wave/water-wave.component.ts b/packages/chart/water-wave/water-wave.component.ts
index 8dec42e5fc..d5bbdac3cf 100644
--- a/packages/chart/water-wave/water-wave.component.ts
+++ b/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;
diff --git a/packages/form/src/sf.component.html b/packages/form/src/sf.component.html
index 876618ae3d..bf4a07477a 100644
--- a/packages/form/src/sf.component.html
+++ b/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"
diff --git a/packages/form/src/widgets/array/array.widget.ts b/packages/form/src/widgets/array/array.widget.ts
index 63217be8f6..d769aa91e1 100644
--- a/packages/form/src/widgets/array/array.widget.ts
+++ b/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>
diff --git a/packages/form/src/widgets/date/date.widget.ts b/packages/form/src/widgets/date/date.widget.ts
index 6e4ac422aa..afc3bcb6e1 100644
--- a/packages/form/src/widgets/date/date.widget.ts
+++ b/packages/form/src/widgets/date/date.widget.ts
@@ -31,7 +31,7 @@ import { SFDateWidgetSchema } from './schema';
           [(ngModel)]="displayValue"
           (ngModelChange)="_change($event)"
           [nzAllowClear]="i.allowClear"
-          [ngClass]="ui.className!"
+          [class]="ui.className!"
           [nzDisabledDate]="ui.disabledDate"
           [nzLocale]="ui.locale!"
           [nzPlaceHolder]="ui.placeholder!"
@@ -52,7 +52,7 @@ import { SFDateWidgetSchema } from './schema';
           [(ngModel)]="displayValue"
           (ngModelChange)="_change($event)"
           [nzAllowClear]="i.allowClear"
-          [ngClass]="ui.className!"
+          [class]="ui.className!"
           [nzDisabledDate]="ui.disabledDate"
           [nzLocale]="ui.locale!"
           [nzPlaceHolder]="ui.placeholder!"
@@ -73,7 +73,7 @@ import { SFDateWidgetSchema } from './schema';
           [(ngModel)]="displayValue"
           (ngModelChange)="_change($event)"
           [nzAllowClear]="i.allowClear"
-          [ngClass]="ui.className!"
+          [class]="ui.className!"
           [nzDisabledDate]="ui.disabledDate"
           [nzLocale]="ui.locale!"
           [nzPlaceHolder]="ui.placeholder!"
@@ -93,7 +93,7 @@ import { SFDateWidgetSchema } from './schema';
           [(ngModel)]="displayValue"
           (ngModelChange)="_change($event)"
           [nzAllowClear]="i.allowClear"
-          [ngClass]="ui.className!"
+          [class]="ui.className!"
           [nzDisabledDate]="ui.disabledDate"
           [nzLocale]="ui.locale!"
           [nzPlaceHolder]="ui.placeholder!"
@@ -121,7 +121,7 @@ import { SFDateWidgetSchema } from './schema';
           [(ngModel)]="displayValue"
           (ngModelChange)="_change($event)"
           [nzAllowClear]="i.allowClear"
-          [ngClass]="ui.className!"
+          [class]="ui.className!"
           [nzDisabledDate]="ui.disabledDate"
           [nzLocale]="ui.locale!"
           [nzPlaceHolder]="ui.placeholder!"
diff --git a/packages/form/src/widgets/number/number.widget.html b/packages/form/src/widgets/number/number.widget.html
index 49ba13c457..da6147a707 100644
--- a/packages/form/src/widgets/number/number.widget.html
+++ b/packages/form/src/widgets/number/number.widget.html
@@ -13,6 +13,6 @@
     [nzPrecision]="ui.precision"
     [nzPlaceHolder]="ui.placeholder || ''"
     [style.width]="width"
-    [ngClass]="{ 'ant-input-number__hide-step': ui.hideStep }"
+    [class.ant-input-number__hide-step]="ui.hideStep"
   />
 </sf-item-wrap>
diff --git a/packages/form/src/widgets/number/number.widget.ts b/packages/form/src/widgets/number/number.widget.ts
index f2ddde539c..e3d57ce881 100644
--- a/packages/form/src/widgets/number/number.widget.ts
+++ b/packages/form/src/widgets/number/number.widget.ts
@@ -27,7 +27,7 @@ import { SFNumberWidgetSchema } from './schema';
       [nzPrecision]="ui.precision"
       [nzPlaceHolder]="ui.placeholder || ''"
       [style.width]="width"
-      [ngClass]="{ 'ant-input-number__hide-step': ui.hideStep }"
+      [class.ant-input-number__hide-step]="ui.hideStep"
     />
   </sf-item-wrap>`,
   preserveWhitespaces: false,
diff --git a/packages/theme/layout-default/layout-nav.component.html b/packages/theme/layout-default/layout-nav.component.html
index 2622f909e8..0649d7c1f2 100644
--- a/packages/theme/layout-default/layout-nav.component.html
+++ b/packages/theme/layout-default/layout-nav.component.html
@@ -38,7 +38,7 @@
             (click)="to(i)"
             [attr.data-id]="i._id"
             class="sidebar-nav__item-link"
-            [ngClass]="{ 'sidebar-nav__item-disabled': i.disabled }"
+            [class.sidebar-nav__item-disabled]="i.disabled"
             (mouseenter)="closeSubMenu()"
           >
             @if (i._needIcon) {
diff --git a/packages/theme/setting-drawer/setting-drawer.component.html b/packages/theme/setting-drawer/setting-drawer.component.html
index c05fd2e083..fab45d9aa7 100644
--- a/packages/theme/setting-drawer/setting-drawer.component.html
+++ b/packages/theme/setting-drawer/setting-drawer.component.html
@@ -82,7 +82,7 @@ <h3 class="setting-drawer__title">设置</h3>
 </nz-drawer>
 <div
   class="setting-drawer__handle"
-  [ngClass]="{ 'setting-drawer__handle-opened': collapse }"
+  [class.setting-drawer__handle-opened]="collapse"
   (click)="toggle()"
   nz-tooltip
   [nzTooltipTitle]="isDev ? devTips : null"
diff --git a/src/app/shared/components/code-box/code-box.component.html b/src/app/shared/components/code-box/code-box.component.html
index 14b98882d2..c3f1415b43 100644
--- a/src/app/shared/components/code-box/code-box.component.html
+++ b/src/app/shared/components/code-box/code-box.component.html
@@ -1,6 +1,6 @@
-<section class="code-box-demo" [ngStyle]="{ background: item.bg }">
-  <div [ngClass]="{ 'browser-mockup': item.browser }" [ngStyle]="{ 'height.px': item.browser }">
-    <div [ngClass]="{ 'browser-scroll': item.browser }">
+<section class="code-box-demo" [style]="{ background: item.bg }">
+  <div [class.browser-mockup]="item.browser" [style]="{ 'height.px': item.browser }">
+    <div [class.browser-scroll]="item.browser">
       <ng-content />
     </div>
   </div>
@@ -64,7 +64,8 @@
             ? 'https://gw.alipayobjects.com/zos/antfincdn/btT3qDZn1U/wSAkBuJFbdxsosKKpqyq.svg'
             : 'https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg'
         "
-        [ngClass]="{ 'code-expand-icon-hide': expand, 'code-expand-icon-show': !expand }"
+        [class.code-expand-icon-hide]="expand"
+        [class.code-expand-icon-show]="!expand"
         (click)="handle()"
       />
       <img
@@ -74,13 +75,14 @@
             ? 'https://gw.alipayobjects.com/zos/antfincdn/CjZPwcKUG3/OpROPHYqWmrMDBFMZtKF.svg'
             : 'https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg'
         "
-        [ngClass]="{ 'code-expand-icon-show': expand, 'code-expand-icon-hide': !expand }"
+        [class.code-expand-icon-show]="expand"
+        [class.code-expand-icon-hide]="!expand"
         (click)="handle()"
       />
     </i>
   </div>
 </section>
-<section class="highlight-wrapper" [ngClass]="{ 'highlight-wrapper-expand': expand }">
+<section class="highlight-wrapper" [class.highlight-wrapper-expand]="expand">
   <div class="highlight">
     <pre class="hljs language-ts"><code>{{item.code}}</code></pre>
   </div>
diff --git a/src/app/shared/components/code-box/code-box.component.ts b/src/app/shared/components/code-box/code-box.component.ts
index b9bbd730e3..f989ce2b92 100644
--- a/src/app/shared/components/code-box/code-box.component.ts
+++ b/src/app/shared/components/code-box/code-box.component.ts
@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { NgClass, NgStyle } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -34,7 +33,7 @@ import { EditButtonComponent } from '../edit-button/edit-button.component';
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [NgStyle, NgClass, I18nPipe, NzToolTipModule, NzIconModule, EditButtonComponent]
+  imports: [I18nPipe, NzToolTipModule, NzIconModule, EditButtonComponent]
 })
 export class CodeBoxComponent implements OnInit {
   private _item: any;
diff --git a/src/app/shared/components/footer/footer.component.ts b/src/app/shared/components/footer/footer.component.ts
index 9a7f55aa0a..1e7bf12139 100644
--- a/src/app/shared/components/footer/footer.component.ts
+++ b/src/app/shared/components/footer/footer.component.ts
@@ -1,4 +1,3 @@
-import { NgStyle } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -27,7 +26,7 @@ import { NzMessageService } from 'ng-zorro-antd/message';
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [NzGridModule, NzColorPickerModule, NgStyle, I18nPipe, RouterLink]
+  imports: [NzGridModule, NzColorPickerModule, I18nPipe, RouterLink]
 })
 export class FooterComponent {
   readonly i18n = inject(ALAIN_I18N_TOKEN);