Skip to content

Commit c3ab3ba

Browse files
HyperLife1119HyperLife1119
authored
refactor(module:*): remove ngClass and ngStyle (#8895)
BREAKING CHANGE: All `nzClass` / `nzStyle` input properties no longer support the following features: - Set(): use arrays instead - Keys which multiple styles/classes separated with keys: split a key with spaces into multiple keys
1 parent cb013f0 commit c3ab3ba

File tree

61 files changed

+151
-240
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+151
-240
lines changed

‎components/anchor/anchor.component.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
*/
55

66
import { normalizePassiveListenerOptions, Platform } from '@angular/cdk/platform';
7-
import { DOCUMENT, NgClass, NgIf, NgStyle, NgTemplateOutlet } from '@angular/common';
7+
import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
88
import {
99
AfterViewInit,
1010
booleanAttribute,
@@ -52,7 +52,7 @@ const passiveEventListenerOptions = normalizePassiveListenerOptions({ passive: t
5252
exportAs: 'nzAnchor',
5353
preserveWhitespaces: false,
5454
standalone: true,
55-
imports: [NgClass, NgIf, NgStyle, NgTemplateOutlet, NzAffixModule],
55+
imports: [NgTemplateOutlet, NzAffixModule],
5656
template: `
5757
@if (nzAffix) {
5858
<nz-affix [nzOffsetTop]="nzOffsetTop" [nzTarget]="container">
@@ -65,10 +65,10 @@ const passiveEventListenerOptions = normalizePassiveListenerOptions({ passive: t
6565
<ng-template #content>
6666
<div
6767
class="ant-anchor-wrapper"
68-
[ngClass]="{ 'ant-anchor-wrapper-horizontal': nzDirection === 'horizontal' }"
69-
[ngStyle]="wrapperStyle"
68+
[class]="{ 'ant-anchor-wrapper-horizontal': nzDirection === 'horizontal' }"
69+
[style]="wrapperStyle"
7070
>
71-
<div class="ant-anchor" [ngClass]="{ 'ant-anchor-fixed': !nzAffix && !nzShowInkInFixed }">
71+
<div class="ant-anchor" [class]="{ 'ant-anchor-fixed': !nzAffix && !nzShowInkInFixed }">
7272
<div class="ant-anchor-ink">
7373
<div class="ant-anchor-ink-ball" #ink></div>
7474
</div>

‎components/auto-complete/autocomplete.component.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
import { AnimationEvent } from '@angular/animations';
77
import { Direction, Directionality } from '@angular/cdk/bidi';
8-
import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
8+
import { NgTemplateOutlet } from '@angular/common';
99
import {
1010
AfterContentInit,
1111
AfterViewInit,
@@ -66,16 +66,16 @@ function normalizeDataSource(value: AutocompleteDataSource): AutocompleteDataSou
6666
changeDetection: ChangeDetectionStrategy.OnPush,
6767
encapsulation: ViewEncapsulation.None,
6868
standalone: true,
69-
imports: [NgClass, NgStyle, NgTemplateOutlet, NzAutocompleteOptionComponent, NzNoAnimationDirective],
69+
imports: [NgTemplateOutlet, NzAutocompleteOptionComponent, NzNoAnimationDirective],
7070
template: `
7171
<ng-template>
7272
<div
7373
#panel
7474
class="ant-select-dropdown ant-select-dropdown-placement-bottomLeft"
7575
[class.ant-select-dropdown-hidden]="!showPanel"
7676
[class.ant-select-dropdown-rtl]="dir === 'rtl'"
77-
[ngClass]="nzOverlayClassName"
78-
[ngStyle]="nzOverlayStyle"
77+
[class]="nzOverlayClassName"
78+
[style]="nzOverlayStyle"
7979
[nzNoAnimation]="noAnimation?.nzNoAnimation"
8080
@slideMotion
8181
(@slideMotion.done)="onAnimationEvent($event)"

‎components/avatar/avatar.component.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import {
2020
} from '@angular/core';
2121

2222
import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
23-
import { NgClassInterface, NzShapeSCType, NzSizeLDSType } from 'ng-zorro-antd/core/types';
23+
import { NzShapeSCType, NzSizeLDSType } from 'ng-zorro-antd/core/types';
2424
import { NzIconModule } from 'ng-zorro-antd/icon';
2525

2626
const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'avatar';
@@ -72,7 +72,6 @@ export class NzAvatarComponent implements OnChanges {
7272
hasText: boolean = false;
7373
hasSrc: boolean = true;
7474
hasIcon: boolean = false;
75-
classMap: NgClassInterface = {};
7675
customSize: string | null = null;
7776

7877
@ViewChild('textEl', { static: false }) textEl?: ElementRef<HTMLSpanElement>;

‎components/avatar/demo/dynamic.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { NgStyle } from '@angular/common';
21
import { Component } from '@angular/core';
32
import { FormsModule } from '@angular/forms';
43

@@ -12,7 +11,7 @@ const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
1211
@Component({
1312
standalone: true,
1413
selector: 'nz-demo-avatar-dynamic',
15-
imports: [FormsModule, NgStyle, NzAvatarModule, NzButtonModule, NzInputNumberModule],
14+
imports: [FormsModule, NzAvatarModule, NzButtonModule, NzInputNumberModule],
1615
template: `
1716
<div>
1817
<label>
@@ -26,7 +25,7 @@ const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
2625
2726
<nz-avatar
2827
[nzGap]="gap"
29-
[ngStyle]="{ 'background-color': color }"
28+
[style]="{ 'background-color': color }"
3029
[nzText]="text"
3130
nzSize="large"
3231
style="vertical-align: middle;"

‎components/badge/badge.component.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
*/
55

66
import { Direction, Directionality } from '@angular/cdk/bidi';
7-
import { NgStyle } from '@angular/common';
87
import {
98
ChangeDetectionStrategy,
109
ChangeDetectorRef,
@@ -44,13 +43,13 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'badge';
4443
changeDetection: ChangeDetectionStrategy.OnPush,
4544
animations: [zoomBadgeMotion],
4645
standalone: true,
47-
imports: [NgStyle, NzBadgeSupComponent, NzOutletModule],
46+
imports: [NzBadgeSupComponent, NzOutletModule],
4847
template: `
4948
@if (nzStatus || nzColor) {
5049
<span
5150
class="ant-badge-status-dot ant-badge-status-{{ nzStatus || presetColor }}"
5251
[style.background]="!presetColor && nzColor"
53-
[ngStyle]="nzStyle"
52+
[style]="nzStyle"
5453
></span>
5554
<span class="ant-badge-status-text">
5655
<ng-container *nzStringTemplateOutlet="nzText">{{ nzText }}</ng-container>

‎components/card/card.component.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
*/
55

66
import { Direction, Directionality } from '@angular/cdk/bidi';
7-
import { NgStyle, NgTemplateOutlet } from '@angular/common';
7+
import { NgTemplateOutlet } from '@angular/common';
88
import {
99
ChangeDetectionStrategy,
1010
ChangeDetectorRef,
@@ -65,7 +65,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'card';
6565
</div>
6666
}
6767
68-
<div class="ant-card-body" [ngStyle]="nzBodyStyle">
68+
<div class="ant-card-body" [style]="nzBodyStyle">
6969
@if (nzLoading) {
7070
<nz-skeleton [nzActive]="true" [nzTitle]="false" [nzParagraph]="{ rows: 4 }"></nz-skeleton>
7171
} @else {
@@ -93,7 +93,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'card';
9393
'[class.ant-card-contain-tabs]': '!!listOfNzCardTabComponent',
9494
'[class.ant-card-rtl]': `dir === 'rtl'`
9595
},
96-
imports: [NzOutletModule, NgTemplateOutlet, NgStyle, NzSkeletonModule],
96+
imports: [NzOutletModule, NgTemplateOutlet, NzSkeletonModule],
9797
standalone: true
9898
})
9999
export class NzCardComponent implements OnDestroy, OnInit {

‎components/cascader/cascader.component.ts‎

Lines changed: 4 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { Direction, Directionality } from '@angular/cdk/bidi';
77
import { BACKSPACE, DOWN_ARROW, ENTER, ESCAPE, LEFT_ARROW, RIGHT_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
88
import { CdkConnectedOverlay, ConnectionPositionPair, OverlayModule } from '@angular/cdk/overlay';
99
import { _getEventTarget } from '@angular/cdk/platform';
10-
import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
10+
import { NgTemplateOutlet } from '@angular/common';
1111
import {
1212
ChangeDetectionStrategy,
1313
ChangeDetectorRef,
@@ -47,7 +47,6 @@ import { DEFAULT_CASCADER_POSITIONS, NzOverlayModule } from 'ng-zorro-antd/core/
4747
import { NzDestroyService } from 'ng-zorro-antd/core/services';
4848
import {
4949
NgClassInterface,
50-
NgClassType,
5150
NgStyleInterface,
5251
NzSafeAny,
5352
NzSizeLDSType,
@@ -166,8 +165,8 @@ const defaultDisplayRender = (labels: string[]): string => labels.join(' / ');
166165
[class.ant-cascader-rtl]="dir === 'rtl'"
167166
[class.ant-cascader-menus-hidden]="!menuVisible"
168167
[class.ant-cascader-menu-empty]="shouldShowEmpty"
169-
[ngClass]="menuCls"
170-
[ngStyle]="nzMenuStyle"
168+
[class]="nzMenuClassName"
169+
[style]="nzMenuStyle"
171170
>
172171
@if (shouldShowEmpty) {
173172
<ul class="ant-cascader-menu" [style.width]="dropdownWidthStyle" [style.height]="dropdownHeightStyle">
@@ -184,7 +183,7 @@ const defaultDisplayRender = (labels: string[]): string => labels.join(' / ');
184183
<ul
185184
class="ant-cascader-menu"
186185
role="menuitemcheckbox"
187-
[ngClass]="menuColumnCls"
186+
[class]="nzColumnClassName"
188187
[style.height]="dropdownHeightStyle"
189188
[style.width]="dropdownWidthStyle"
190189
>
@@ -247,8 +246,6 @@ const defaultDisplayRender = (labels: string[]): string => labels.join(' / ');
247246
NzFormPatchModule,
248247
NzOverlayModule,
249248
NzNoAnimationDirective,
250-
NgClass,
251-
NgStyle,
252249
NzEmptyModule,
253250
NzCascaderOptionComponent
254251
],
@@ -379,14 +376,6 @@ export class NzCascaderComponent
379376
return this.inputString;
380377
}
381378

382-
get menuCls(): NgClassType {
383-
return { [`${this.nzMenuClassName}`]: !!this.nzMenuClassName };
384-
}
385-
386-
get menuColumnCls(): NgClassType {
387-
return { [`${this.nzColumnClassName}`]: !!this.nzColumnClassName };
388-
}
389-
390379
private get hasInput(): boolean {
391380
return !!this.inputValue;
392381
}

‎components/cascader/cascader.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2159,7 +2159,7 @@ const options5: NzSafeAny[] = [];
21592159
></nz-cascader>
21602160
21612161
<ng-template #renderTpl let-labels="labels" let-selectedOptions="selectedOptions">
2162-
@for (label of labels; track labels) {
2162+
@for (label of labels; track label) {
21632163
{{ label }}{{ $last ? '' : ' | ' }}
21642164
}
21652165
</ng-template>

‎components/collapse/demo/custom.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { NgStyle } from '@angular/common';
21
import { Component } from '@angular/core';
32

43
import { NzCollapseModule } from 'ng-zorro-antd/collapse';
@@ -14,15 +13,15 @@ interface Panel {
1413
@Component({
1514
selector: 'nz-demo-collapse-custom',
1615
standalone: true,
17-
imports: [NgStyle, NzIconModule, NzCollapseModule],
16+
imports: [NzIconModule, NzCollapseModule],
1817
template: `
1918
<nz-collapse [nzBordered]="false">
2019
@for (panel of panels; track panel) {
2120
<nz-collapse-panel
2221
#p
2322
[nzHeader]="panel.name"
2423
[nzActive]="panel.active"
25-
[ngStyle]="customStyle"
24+
[style]="customStyle"
2625
[nzExpandedIcon]="!$first ? panel.icon || expandedIcon : undefined"
2726
>
2827
<p>{{ panel.name }} content</p>

‎components/color-picker/src/components/slider.component.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
44
*/
55

6-
import { DOCUMENT, NgClass } from '@angular/common';
6+
import { DOCUMENT } from '@angular/common';
77
import {
88
AfterViewInit,
99
ChangeDetectorRef,
@@ -42,14 +42,14 @@ function getPosition(e: EventType): { pageX: number; pageY: number } {
4242
// eslint-disable-next-line @angular-eslint/component-selector
4343
selector: 'color-slider',
4444
standalone: true,
45-
imports: [PaletteComponent, GradientComponent, HandlerComponent, NgClass],
45+
imports: [PaletteComponent, GradientComponent, HandlerComponent],
4646
template: `
4747
<div
4848
#slider
4949
(mousedown)="dragStartHandle($event)"
5050
(touchstart)="dragStartHandle($event)"
5151
class="ant-color-picker-slider"
52-
[ngClass]="'ant-color-picker-slider-' + type"
52+
[class]="'ant-color-picker-slider-' + type"
5353
>
5454
<color-palette>
5555
<div

0 commit comments

Comments
 (0)