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

+5-5
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

+4-4
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

+1-2
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

+2-3
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

+2-3
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

+3-3
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

+4-15
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

+1-1
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

+2-3
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

+3-3
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

‎components/core/types/ng-class.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
import { NzSafeAny } from './any';
77

8-
export type NgClassType = string | string[] | Set<string> | NgClassInterface;
8+
export type NgClassType = string | string[] | NgClassInterface;
99

1010
export interface NgClassInterface {
1111
[klass: string]: NzSafeAny;

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

+3-4
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
VerticalConnectionPos
1515
} from '@angular/cdk/overlay';
1616
import { Platform } from '@angular/cdk/platform';
17-
import { DOCUMENT, NgStyle, NgTemplateOutlet } from '@angular/common';
17+
import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
1818
import {
1919
AfterViewInit,
2020
booleanAttribute,
@@ -165,7 +165,7 @@ export type NzPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
165165
166166
<!-- Right operator icons -->
167167
<ng-template #tplRightRest>
168-
<div class="{{ prefixCls }}-active-bar" [ngStyle]="activeBarStyle"></div>
168+
<div class="{{ prefixCls }}-active-bar" [style]="activeBarStyle"></div>
169169
@if (showClear) {
170170
<span class="{{ prefixCls }}-clear" (click)="onClickClear($event)">
171171
<span nz-icon nzType="close-circle" nzTheme="fill"></span>
@@ -193,7 +193,7 @@ export type NzPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
193193
[class.ant-picker-dropdown-range]="isRange"
194194
[class.ant-picker-active-left]="datePickerService.activeInput === 'left'"
195195
[class.ant-picker-active-right]="datePickerService.activeInput === 'right'"
196-
[ngStyle]="nzPopupStyle"
196+
[style]="nzPopupStyle"
197197
>
198198
<date-range-popup
199199
[isRange]="isRange"
@@ -269,7 +269,6 @@ export type NzPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
269269
NgTemplateOutlet,
270270
NzOutletModule,
271271
NzIconModule,
272-
NgStyle,
273272
NzFormPatchModule,
274273
DateRangePopupComponent,
275274
CdkConnectedOverlay,

‎components/date-picker/date-range-popup.component.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
*/
55

66
import { Direction } from '@angular/cdk/bidi';
7-
import { NgStyle, NgTemplateOutlet } from '@angular/common';
7+
import { NgTemplateOutlet } from '@angular/common';
88
import {
99
booleanAttribute,
1010
ChangeDetectionStrategy,
@@ -61,7 +61,7 @@ import { getTimeConfig, isAllowedDate, PREFIX_CLASS } from './util';
6161
template: `
6262
@if (isRange) {
6363
<div class="{{ prefixCls }}-range-wrapper {{ prefixCls }}-date-range-wrapper">
64-
<div class="{{ prefixCls }}-range-arrow" [ngStyle]="arrowPosition"></div>
64+
<div class="{{ prefixCls }}-range-arrow" [style]="arrowPosition"></div>
6565
<div class="{{ prefixCls }}-panel-container {{ showWeek ? prefixCls + '-week-number' : '' }}">
6666
<div class="{{ prefixCls }}-panels">
6767
@if (hasTimePicker) {
@@ -145,7 +145,7 @@ import { getTimeConfig, isAllowedDate, PREFIX_CLASS } from './util';
145145
}
146146
</ng-template>
147147
`,
148-
imports: [InnerPopupComponent, NgTemplateOutlet, CalendarFooterComponent, NgStyle],
148+
imports: [InnerPopupComponent, NgTemplateOutlet, CalendarFooterComponent],
149149
standalone: true
150150
})
151151
export class DateRangePopupComponent implements OnInit, OnChanges, OnDestroy {

‎components/date-picker/lib/abstract-table.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,15 @@
1414

1515
<tbody>
1616
@for (row of bodyRows; track row.trackByIndex) {
17-
<tr [ngClass]="row.classMap!" role="row">
17+
<tr [class]="row.classMap!" role="row">
1818
@if (row.weekNum) {
1919
<td role="gridcell" class="{{ prefixCls }}-cell-week"> {{ row.weekNum }}</td>
2020
}
2121
@for (cell of row.dateCells; track cell.trackByIndex) {
2222
<td
2323
[title]="cell.title"
2424
role="gridcell"
25-
[ngClass]="cell.classMap!"
25+
[class]="cell.classMap!"
2626
(click)="cell.isDisabled ? null : cell.onClick()"
2727
(mouseenter)="cell.onMouseEnter()">
2828
@switch (prefixCls) {

‎components/date-picker/lib/date-header.component.ts

+2-4
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,22 @@
33
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
44
*/
55

6-
import { NgClass, NgForOf, NgIf } from '@angular/common';
76
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
87

98
import { DateHelperService } from 'ng-zorro-antd/i18n';
109

10+
import { NzDateMode } from '../standard-types';
1111
import { AbstractPanelHeader } from './abstract-panel-header';
1212
import { PanelSelector } from './interface';
1313
import { transCompatFormat } from './util';
14-
import { NzDateMode } from '../standard-types';
1514

1615
@Component({
1716
encapsulation: ViewEncapsulation.None,
1817
changeDetection: ChangeDetectionStrategy.OnPush,
1918
selector: 'date-header', // eslint-disable-line @angular-eslint/component-selector
2019
exportAs: 'dateHeader',
2120
templateUrl: './abstract-panel-header.html',
22-
standalone: true,
23-
imports: [NgForOf, NgIf, NgClass]
21+
standalone: true
2422
})
2523
export class DateHeaderComponent extends AbstractPanelHeader {
2624
override mode: NzDateMode = 'date';

0 commit comments

Comments
 (0)