diff --git a/components/avatar/avatar.component.ts b/components/avatar/avatar.component.ts
index ed5216767c..e4a8cdb24b 100644
--- a/components/avatar/avatar.component.ts
+++ b/components/avatar/avatar.component.ts
@@ -38,6 +38,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'avatar';
{{ nzText }}
`,
host: {
+ class: 'ant-avatar',
'[class.ant-avatar-lg]': `nzSize === 'large'`,
'[class.ant-avatar-sm]': `nzSize === 'small'`,
'[class.ant-avatar-square]': `nzShape === 'square'`,
@@ -84,10 +85,7 @@ export class NzAvatarComponent implements OnChanges {
private elementRef: ElementRef,
private cdr: ChangeDetectorRef,
private platform: Platform
- ) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-avatar');
- }
+ ) {}
imgError($event: Event): void {
this.nzError.emit($event);
diff --git a/components/badge/badge-sup.component.ts b/components/badge/badge-sup.component.ts
index 76209fe244..fbd17fc162 100644
--- a/components/badge/badge-sup.component.ts
+++ b/components/badge/badge-sup.component.ts
@@ -6,7 +6,6 @@
import {
ChangeDetectionStrategy,
Component,
- ElementRef,
Input,
OnChanges,
OnInit,
@@ -47,6 +46,7 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
{{ nzOverflowCount }}+
`,
host: {
+ class: 'ant-scroll-number',
'[@.disabled]': `disableAnimation`,
'[@zoomBadgeMotion]': '',
'[attr.title]': `nzTitle === null ? '' : nzTitle || nzCount`,
@@ -72,10 +72,7 @@ export class NzBadgeSupComponent implements OnInit, OnChanges {
count: number = 0;
countSingleArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
- constructor(private elementRef: ElementRef) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-scroll-number');
- }
+ constructor() {}
generateMaxNumberArray(): void {
this.maxNumberArray = this.nzOverflowCount.toString().split('');
diff --git a/components/badge/badge.component.ts b/components/badge/badge.component.ts
index 0773c6470d..9c5a993aa4 100644
--- a/components/badge/badge.component.ts
+++ b/components/badge/badge.component.ts
@@ -68,6 +68,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'badge';
`,
host: {
+ class: 'ant-badge',
'[class.ant-badge-status]': 'nzStatus',
'[class.ant-badge-not-a-wrapper]': '!!(nzStandalone || nzStatus || nzColor)'
}
@@ -102,10 +103,7 @@ export class NzBadgeComponent implements OnChanges, OnDestroy, OnInit {
private elementRef: ElementRef,
@Optional() private directionality: Directionality,
@Host() @Optional() public noAnimation?: NzNoAnimationDirective
- ) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-badge');
- }
+ ) {}
ngOnInit(): void {
this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => {
this.dir = direction;
diff --git a/components/badge/ribbon.component.ts b/components/badge/ribbon.component.ts
index 79498d2b7f..26d1127903 100644
--- a/components/badge/ribbon.component.ts
+++ b/components/badge/ribbon.component.ts
@@ -6,7 +6,6 @@
import {
ChangeDetectionStrategy,
Component,
- ElementRef,
Input,
OnChanges,
SimpleChanges,
@@ -34,7 +33,8 @@ import { badgePresetColors } from './preset-colors';
{{ nzText }}
- `
+ `,
+ host: { class: 'ant-ribbon-wrapper' }
})
export class NzRibbonComponent implements OnChanges {
@Input() nzColor: string | undefined;
@@ -42,10 +42,7 @@ export class NzRibbonComponent implements OnChanges {
@Input() nzText: string | TemplateRef | null = null;
presetColor: string | null = null;
- constructor(private elementRef: ElementRef) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-ribbon-wrapper');
- }
+ constructor() {}
ngOnChanges(changes: SimpleChanges): void {
const { nzColor } = changes;
diff --git a/components/button/button-group.component.ts b/components/button/button-group.component.ts
index b3b1365f95..6263a9f4a3 100644
--- a/components/button/button-group.component.ts
+++ b/components/button/button-group.component.ts
@@ -7,7 +7,6 @@ import { Direction, Directionality } from '@angular/cdk/bidi';
import {
ChangeDetectionStrategy,
Component,
- ElementRef,
Input,
OnDestroy,
OnInit,
@@ -25,6 +24,7 @@ export type NzButtonGroupSize = 'large' | 'default' | 'small';
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
host: {
+ class: 'ant-btn-group',
'[class.ant-btn-group-lg]': `nzSize === 'large'`,
'[class.ant-btn-group-sm]': `nzSize === 'small'`,
'[class.ant-btn-group-rtl]': `dir === 'rtl'`
@@ -39,10 +39,7 @@ export class NzButtonGroupComponent implements OnDestroy, OnInit {
private destroy$ = new Subject();
- constructor(private elementRef: ElementRef, @Optional() private directionality: Directionality) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-btn-group');
- }
+ constructor(@Optional() private directionality: Directionality) {}
ngOnInit(): void {
this.dir = this.directionality.value;
this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => {
diff --git a/components/button/button.component.ts b/components/button/button.component.ts
index 184018b3db..9970f59986 100644
--- a/components/button/button.component.ts
+++ b/components/button/button.component.ts
@@ -47,6 +47,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'button';
`,
host: {
+ class: 'ant-btn',
'[class.ant-btn-primary]': `nzType === 'primary'`,
'[class.ant-btn-dashed]': `nzType === 'dashed'`,
'[class.ant-btn-link]': `nzType === 'link'`,
@@ -119,8 +120,6 @@ export class NzButtonComponent implements OnDestroy, OnChanges, AfterViewInit, A
public nzConfigService: NzConfigService,
@Optional() private directionality: Directionality
) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-btn');
this.nzConfigService
.getConfigChangeEventForComponent(NZ_CONFIG_MODULE_NAME)
.pipe(takeUntil(this.destroy$))
diff --git a/components/calendar/calendar-header.component.ts b/components/calendar/calendar-header.component.ts
index 7f652ca908..449dce4c6d 100644
--- a/components/calendar/calendar-header.component.ts
+++ b/components/calendar/calendar-header.component.ts
@@ -6,7 +6,6 @@
import {
ChangeDetectionStrategy,
Component,
- ElementRef,
EventEmitter,
Input,
OnInit,
@@ -58,6 +57,7 @@ import { NzSelectSizeType } from 'ng-zorro-antd/select';
`,
host: {
+ class: 'ant-fullcalendar-header',
'[style.display]': `'block'`
}
})
@@ -96,10 +96,7 @@ export class NzCalendarHeaderComponent implements OnInit {
return this.i18n.getLocale().Calendar.lang.month;
}
- constructor(private i18n: I18n, private dateHelper: DateHelperService, private elementRef: ElementRef) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-fullcalendar-header');
- }
+ constructor(private i18n: I18n, private dateHelper: DateHelperService) {}
ngOnInit(): void {
this.setUpYears();
diff --git a/components/calendar/calendar.component.ts b/components/calendar/calendar.component.ts
index 0921ecf300..3dcf9f8a4d 100644
--- a/components/calendar/calendar.component.ts
+++ b/components/calendar/calendar.component.ts
@@ -9,7 +9,6 @@ import {
ChangeDetectorRef,
Component,
ContentChild,
- ElementRef,
EventEmitter,
forwardRef,
Input,
@@ -88,6 +87,7 @@ type NzCalendarDateTemplate = TemplateRef<{ $implicit: Date }>;
`,
host: {
+ class: 'ant-picker-calendar',
'[class.ant-picker-calendar-full]': 'nzFullscreen',
'[class.ant-picker-calendar-mini]': '!nzFullscreen',
'[class.ant-picker-calendar-rtl]': `dir === 'rtl'`
@@ -144,14 +144,7 @@ export class NzCalendarComponent implements ControlValueAccessor, OnChanges, OnI
@Input() @InputBoolean() nzFullscreen: boolean = true;
- constructor(
- private cdr: ChangeDetectorRef,
- private elementRef: ElementRef,
- @Optional() private directionality: Directionality
- ) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-picker-calendar');
- }
+ constructor(private cdr: ChangeDetectorRef, @Optional() private directionality: Directionality) {}
ngOnInit(): void {
this.dir = this.directionality.value;
diff --git a/components/card/card-grid.directive.ts b/components/card/card-grid.directive.ts
index 46fcd21cdc..09e503d165 100644
--- a/components/card/card-grid.directive.ts
+++ b/components/card/card-grid.directive.ts
@@ -3,7 +3,7 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
-import { Directive, ElementRef, Input } from '@angular/core';
+import { Directive, Input } from '@angular/core';
import { BooleanInput } from 'ng-zorro-antd/core/types';
import { InputBoolean } from 'ng-zorro-antd/core/util';
@@ -12,6 +12,7 @@ import { InputBoolean } from 'ng-zorro-antd/core/util';
selector: '[nz-card-grid]',
exportAs: 'nzCardGrid',
host: {
+ class: 'ant-card-grid',
'[class.ant-card-hoverable]': 'nzHoverable'
}
})
@@ -19,8 +20,5 @@ export class NzCardGridDirective {
static ngAcceptInputType_nzHoverable: BooleanInput;
@Input() @InputBoolean() nzHoverable = true;
- constructor(private elementRef: ElementRef) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-card-grid');
- }
+ constructor() {}
}
diff --git a/components/card/card-loading.component.ts b/components/card/card-loading.component.ts
index bb10a04cdd..5e93890afc 100644
--- a/components/card/card-loading.component.ts
+++ b/components/card/card-loading.component.ts
@@ -3,7 +3,7 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
-import { ChangeDetectionStrategy, Component, ElementRef, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'nz-card-loading',
@@ -23,7 +23,8 @@ import { ChangeDetectionStrategy, Component, ElementRef, ViewEncapsulation } fro
`,
preserveWhitespaces: false,
changeDetection: ChangeDetectionStrategy.OnPush,
- encapsulation: ViewEncapsulation.None
+ encapsulation: ViewEncapsulation.None,
+ host: { class: 'ant-card-loading-content' }
})
export class NzCardLoadingComponent {
listOfLoading: string[][] = [
@@ -34,8 +35,5 @@ export class NzCardLoadingComponent {
['ant-col-4', 'ant-col-3', 'ant-col-16'],
['ant-col-8', 'ant-col-6', 'ant-col-8']
];
- constructor(private elementRef: ElementRef) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-card-loading-content');
- }
+ constructor() {}
}
diff --git a/components/card/card-meta.component.ts b/components/card/card-meta.component.ts
index c99da64303..4407462881 100755
--- a/components/card/card-meta.component.ts
+++ b/components/card/card-meta.component.ts
@@ -3,7 +3,7 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
-import { ChangeDetectionStrategy, Component, ElementRef, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'nz-card-meta',
@@ -23,15 +23,13 @@ import { ChangeDetectionStrategy, Component, ElementRef, Input, TemplateRef, Vie
{{ nzDescription }}
- `
+ `,
+ host: { class: 'ant-card-meta' }
})
export class NzCardMetaComponent {
@Input() nzTitle: string | TemplateRef | null = null;
@Input() nzDescription: string | TemplateRef | null = null;
@Input() nzAvatar: TemplateRef | null = null;
- constructor(private elementRef: ElementRef) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-card-meta');
- }
+ constructor() {}
}
diff --git a/components/card/card.component.ts b/components/card/card.component.ts
index 96327c81c7..372916aafe 100755
--- a/components/card/card.component.ts
+++ b/components/card/card.component.ts
@@ -10,7 +10,6 @@ import {
Component,
ContentChild,
ContentChildren,
- ElementRef,
Input,
OnDestroy,
OnInit,
@@ -69,6 +68,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'card';
`,
host: {
+ class: 'ant-card',
'[class.ant-card-loading]': 'nzLoading',
'[class.ant-card-bordered]': 'nzBorderless === false && nzBordered',
'[class.ant-card-hoverable]': 'nzHoverable',
@@ -106,12 +106,8 @@ export class NzCardComponent implements OnDestroy, OnInit {
constructor(
public nzConfigService: NzConfigService,
private cdr: ChangeDetectorRef,
- private elementRef: ElementRef,
@Optional() private directionality: Directionality
) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-card');
-
this.nzConfigService
.getConfigChangeEventForComponent(NZ_CONFIG_MODULE_NAME)
.pipe(takeUntil(this.destroy$))
diff --git a/components/checkbox/checkbox-group.component.ts b/components/checkbox/checkbox-group.component.ts
index 8ba17a077d..4bff61dba2 100644
--- a/components/checkbox/checkbox-group.component.ts
+++ b/components/checkbox/checkbox-group.component.ts
@@ -55,6 +55,7 @@ export interface NzCheckBoxOptionInterface {
}
],
host: {
+ class: 'ant-checkbox-group',
'[class.ant-checkbox-group-rtl]': `dir === 'rtl'`
}
})
@@ -84,10 +85,7 @@ export class NzCheckboxGroupComponent implements ControlValueAccessor, OnInit, O
private focusMonitor: FocusMonitor,
private cdr: ChangeDetectorRef,
@Optional() private directionality: Directionality
- ) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-checkbox-group');
- }
+ ) {}
ngOnInit(): void {
this.focusMonitor
diff --git a/components/checkbox/checkbox.component.ts b/components/checkbox/checkbox.component.ts
index e46303be3f..6f1000a6e0 100644
--- a/components/checkbox/checkbox.component.ts
+++ b/components/checkbox/checkbox.component.ts
@@ -67,6 +67,7 @@ import { NzCheckboxWrapperComponent } from './checkbox-wrapper.component';
}
],
host: {
+ class: 'ant-checkbox-wrapper',
'[class.ant-checkbox-wrapper-checked]': 'nzChecked',
'[class.ant-checkbox-rtl]': `dir === 'rtl'`,
'(click)': 'hostClick($event)'
@@ -141,10 +142,7 @@ export class NzCheckboxComponent implements OnInit, ControlValueAccessor, OnDest
private cdr: ChangeDetectorRef,
private focusMonitor: FocusMonitor,
@Optional() private directionality: Directionality
- ) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-checkbox-wrapper');
- }
+ ) {}
ngOnInit(): void {
this.focusMonitor
diff --git a/components/collapse/collapse-panel.component.ts b/components/collapse/collapse-panel.component.ts
index 1c1e7695cb..3e19cba1b2 100644
--- a/components/collapse/collapse-panel.component.ts
+++ b/components/collapse/collapse-panel.component.ts
@@ -7,7 +7,6 @@ import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
- ElementRef,
EventEmitter,
Host,
Input,
@@ -62,6 +61,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'collapsePanel';
`,
host: {
+ class: 'ant-collapse-item',
'[class.ant-collapse-no-arrow]': '!nzShowArrow',
'[class.ant-collapse-item-active]': 'nzActive',
'[class.ant-collapse-item-disabled]': 'nzDisabled'
@@ -95,11 +95,8 @@ export class NzCollapsePanelComponent implements OnInit, OnDestroy {
public nzConfigService: NzConfigService,
private cdr: ChangeDetectorRef,
@Host() private nzCollapseComponent: NzCollapseComponent,
- private elementRef: ElementRef,
@Optional() public noAnimation?: NzNoAnimationDirective
) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-collapse-item');
this.nzConfigService
.getConfigChangeEventForComponent(NZ_CONFIG_MODULE_NAME)
.pipe(takeUntil(this.destroy$))
diff --git a/components/collapse/collapse.component.ts b/components/collapse/collapse.component.ts
index c60ec569e8..5c525c054c 100644
--- a/components/collapse/collapse.component.ts
+++ b/components/collapse/collapse.component.ts
@@ -8,7 +8,6 @@ import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
- ElementRef,
Input,
OnDestroy,
OnInit,
@@ -33,6 +32,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'collapse';
encapsulation: ViewEncapsulation.None,
template: ` `,
host: {
+ class: 'ant-collapse',
'[class.ant-collapse-icon-position-left]': `nzExpandIconPosition === 'left'`,
'[class.ant-collapse-icon-position-right]': `nzExpandIconPosition === 'right'`,
'[class.ant-collapse-ghost]': `nzGhost`,
@@ -58,12 +58,8 @@ export class NzCollapseComponent implements OnDestroy, OnInit {
constructor(
public nzConfigService: NzConfigService,
private cdr: ChangeDetectorRef,
- private elementRef: ElementRef,
@Optional() private directionality: Directionality
) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-collapse');
-
this.nzConfigService
.getConfigChangeEventForComponent(NZ_CONFIG_MODULE_NAME)
.pipe(takeUntil(this.destroy$))
diff --git a/components/divider/divider.component.ts b/components/divider/divider.component.ts
index 8ae3dad7bc..5e22d4b408 100644
--- a/components/divider/divider.component.ts
+++ b/components/divider/divider.component.ts
@@ -3,7 +3,7 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
-import { ChangeDetectionStrategy, Component, ElementRef, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
import { BooleanInput } from 'ng-zorro-antd/core/types';
import { InputBoolean } from 'ng-zorro-antd/core/util';
@@ -20,6 +20,7 @@ import { InputBoolean } from 'ng-zorro-antd/core/util';
`,
host: {
+ class: 'ant-divider',
'[class.ant-divider-horizontal]': `nzType === 'horizontal'`,
'[class.ant-divider-vertical]': `nzType === 'vertical'`,
'[class.ant-divider-with-text]': `nzText`,
@@ -40,8 +41,5 @@ export class NzDividerComponent {
@Input() @InputBoolean() nzDashed = false;
@Input() @InputBoolean() nzPlain = false;
- constructor(private elementRef: ElementRef) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-divider');
- }
+ constructor() {}
}
diff --git a/components/dropdown/dropdown-a.directive.ts b/components/dropdown/dropdown-a.directive.ts
index 33246702c2..8ec2de3f0d 100644
--- a/components/dropdown/dropdown-a.directive.ts
+++ b/components/dropdown/dropdown-a.directive.ts
@@ -3,14 +3,14 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
-import { Directive, ElementRef } from '@angular/core';
+import { Directive } from '@angular/core';
@Directive({
- selector: 'a[nz-dropdown]'
+ selector: 'a[nz-dropdown]',
+ host: {
+ class: 'ant-dropdown-link'
+ }
})
export class NzDropDownADirective {
- constructor(private elementRef: ElementRef) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-dropdown-link');
- }
+ constructor() {}
}
diff --git a/components/dropdown/dropdown.directive.ts b/components/dropdown/dropdown.directive.ts
index 41ed94dec6..d43da83e7c 100644
--- a/components/dropdown/dropdown.directive.ts
+++ b/components/dropdown/dropdown.directive.ts
@@ -41,7 +41,10 @@ const listOfPositions = [
@Directive({
selector: '[nz-dropdown]',
- exportAs: 'nzDropdown'
+ exportAs: 'nzDropdown',
+ host: {
+ class: 'ant-dropdown-trigger'
+ }
})
export class NzDropDownDirective implements AfterViewInit, OnDestroy, OnChanges {
readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;
@@ -87,10 +90,7 @@ export class NzDropDownDirective implements AfterViewInit, OnDestroy, OnChanges
private renderer: Renderer2,
private viewContainerRef: ViewContainerRef,
private platform: Platform
- ) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-dropdown-trigger');
- }
+ ) {}
ngAfterViewInit(): void {
if (this.nzDropdownMenu) {
diff --git a/components/grid/row.directive.ts b/components/grid/row.directive.ts
index 0fc5e7c659..4bd1b429c0 100644
--- a/components/grid/row.directive.ts
+++ b/components/grid/row.directive.ts
@@ -32,6 +32,7 @@ export type NzAlign = 'top' | 'middle' | 'bottom';
selector: '[nz-row],nz-row,nz-form-item',
exportAs: 'nzRow',
host: {
+ class: 'ant-row',
'[class.ant-row-top]': `nzAlign === 'top'`,
'[class.ant-row-middle]': `nzAlign === 'middle'`,
'[class.ant-row-bottom]': `nzAlign === 'bottom'`,
@@ -96,10 +97,7 @@ export class NzRowDirective implements OnInit, OnChanges, AfterViewInit, OnDestr
public platform: Platform,
private breakpointService: NzBreakpointService,
@Optional() private directionality: Directionality
- ) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-row');
- }
+ ) {}
ngOnInit(): void {
this.dir = this.directionality.value;
diff --git a/components/image/image-preview.component.ts b/components/image/image-preview.component.ts
index de3293d63d..da39d5603d 100644
--- a/components/image/image-preview.component.ts
+++ b/components/image/image-preview.component.ts
@@ -106,9 +106,9 @@ const initialPosition = {
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
host: {
+ class: 'ant-image-preview-wrap',
'[class.ant-image-preview-moving]': 'isDragging',
'[style.zIndex]': 'config.nzZIndex',
- '[class.ant-image-preview-wrap]': 'true',
'[@.disabled]': 'config.nzNoAnimation',
'[@fadeMotion]': 'animationState',
'(@fadeMotion.start)': 'onAnimationStart($event)',
@@ -193,7 +193,6 @@ export class NzImagePreviewComponent implements OnDestroy {
public config: NzImagePreviewOptions,
private overlayRef: OverlayRef
) {
- // TODO: move to host after View Engine deprecation
this.zoom = this.config.nzZoom ?? 1;
this.rotate = this.config.nzRotate ?? 0;
this.updateZoomOutDisabled();
diff --git a/components/input-number/input-number.component.ts b/components/input-number/input-number.component.ts
index e10aff5b9d..7cf09aa2a3 100644
--- a/components/input-number/input-number.component.ts
+++ b/components/input-number/input-number.component.ts
@@ -87,6 +87,7 @@ import { InputBoolean, isNotNil } from 'ng-zorro-antd/core/util';
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
host: {
+ class: 'ant-input-number',
'[class.ant-input-number-focused]': 'isFocused',
'[class.ant-input-number-lg]': `nzSize === 'large'`,
'[class.ant-input-number-sm]': `nzSize === 'small'`,
@@ -382,10 +383,7 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn
private cdr: ChangeDetectorRef,
private focusMonitor: FocusMonitor,
@Optional() private directionality: Directionality
- ) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-input-number');
- }
+ ) {}
ngOnInit(): void {
this.focusMonitor
diff --git a/components/layout/layout.component.ts b/components/layout/layout.component.ts
index 6066752cbe..b089e9b029 100644
--- a/components/layout/layout.component.ts
+++ b/components/layout/layout.component.ts
@@ -8,7 +8,6 @@ import {
ChangeDetectionStrategy,
Component,
ContentChildren,
- ElementRef,
OnDestroy,
OnInit,
Optional,
@@ -28,6 +27,7 @@ import { NzSiderComponent } from './sider.component';
preserveWhitespaces: false,
template: ` `,
host: {
+ class: 'ant-layout',
'[class.ant-layout-rtl]': `dir === 'rtl'`,
'[class.ant-layout-has-sider]': 'listOfNzSiderComponent.length > 0'
}
@@ -38,10 +38,7 @@ export class NzLayoutComponent implements OnDestroy, OnInit {
dir: Direction = 'ltr';
private destroy$ = new Subject();
- constructor(private elementRef: ElementRef, @Optional() private directionality: Directionality) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-layout');
- }
+ constructor(@Optional() private directionality: Directionality) {}
ngOnInit(): void {
this.dir = this.directionality.value;
this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => {
diff --git a/components/layout/sider.component.ts b/components/layout/sider.component.ts
index b736c6f427..defc6f8d0b 100644
--- a/components/layout/sider.component.ts
+++ b/components/layout/sider.component.ts
@@ -10,7 +10,6 @@ import {
ChangeDetectorRef,
Component,
ContentChild,
- ElementRef,
EventEmitter,
Input,
OnChanges,
@@ -54,6 +53,7 @@ import { NzMenuDirective } from 'ng-zorro-antd/menu';
>
`,
host: {
+ class: 'ant-layout-sider',
'[class.ant-layout-sider-zero-width]': `nzCollapsed && nzCollapsedWidth === 0`,
'[class.ant-layout-sider-light]': `nzTheme === 'light'`,
'[class.ant-layout-sider-dark]': `nzTheme === 'dark'`,
@@ -111,12 +111,8 @@ export class NzSiderComponent implements OnInit, OnDestroy, OnChanges, AfterCont
constructor(
private platform: Platform,
private cdr: ChangeDetectorRef,
- private breakpointService: NzBreakpointService,
- private elementRef: ElementRef
- ) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-layout-sider');
- }
+ private breakpointService: NzBreakpointService
+ ) {}
ngOnInit(): void {
this.updateStyleMap();
diff --git a/components/list/list.component.ts b/components/list/list.component.ts
index cfb1e8901b..61354e9bd5 100644
--- a/components/list/list.component.ts
+++ b/components/list/list.component.ts
@@ -9,7 +9,6 @@ import {
ChangeDetectionStrategy,
Component,
ContentChild,
- ElementRef,
Input,
OnChanges,
OnDestroy,
@@ -94,6 +93,7 @@ import { NzListFooterComponent, NzListLoadMoreDirective, NzListPaginationCompone
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
+ class: 'ant-list',
'[class.ant-list-rtl]': `dir === 'rtl'`,
'[class.ant-list-vertical]': 'nzItemLayout === "vertical"',
'[class.ant-list-lg]': 'nzSize === "large"',
@@ -137,10 +137,7 @@ export class NzListComponent implements AfterContentInit, OnChanges, OnDestroy,
return this.itemLayoutNotifySource.asObservable();
}
- constructor(private elementRef: ElementRef, @Optional() private directionality: Directionality) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-list');
- }
+ constructor(@Optional() private directionality: Directionality) {}
ngOnInit(): void {
this.dir = this.directionality.value;
this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => {
diff --git a/components/menu/submenu-inline-child.component.ts b/components/menu/submenu-inline-child.component.ts
index bdb9a77ba6..5380bf60e3 100644
--- a/components/menu/submenu-inline-child.component.ts
+++ b/components/menu/submenu-inline-child.component.ts
@@ -34,6 +34,7 @@ import { NzMenuModeType } from './menu.types';
changeDetection: ChangeDetectionStrategy.OnPush,
template: ` `,
host: {
+ class: 'ant-menu ant-menu-inline ant-menu-sub',
'[class.ant-menu-rtl]': `dir === 'rtl'`,
'[@collapseMotion]': 'expandState'
}
@@ -52,10 +53,7 @@ export class NzSubmenuInlineChildComponent implements OnDestroy, OnInit, OnChang
private elementRef: ElementRef,
private renderer: Renderer2,
@Optional() private directionality: Directionality
- ) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-menu', 'ant-menu-inline', 'ant-menu-sub');
- }
+ ) {}
calcMotionState(): void {
if (this.nzOpen) {
diff --git a/components/menu/submenu-non-inline-child.component.ts b/components/menu/submenu-non-inline-child.component.ts
index 10e91a4e90..8ca3e1529e 100644
--- a/components/menu/submenu-non-inline-child.component.ts
+++ b/components/menu/submenu-non-inline-child.component.ts
@@ -7,7 +7,6 @@ import { Direction, Directionality } from '@angular/cdk/bidi';
import {
ChangeDetectionStrategy,
Component,
- ElementRef,
EventEmitter,
Input,
OnChanges,
@@ -48,6 +47,7 @@ import { NzMenuModeType, NzMenuThemeType } from './menu.types';
`,
host: {
+ class: 'ant-menu-submenu ant-menu-submenu-popup',
'[class.ant-menu-light]': "theme === 'light'",
'[class.ant-menu-dark]': "theme === 'dark'",
'[class.ant-menu-submenu-placement-bottom]': "mode === 'horizontal'",
@@ -71,10 +71,7 @@ export class NzSubmenuNoneInlineChildComponent implements OnDestroy, OnInit, OnC
@Input() nzOpen = false;
@Output() readonly subMenuMouseState = new EventEmitter();
- constructor(private elementRef: ElementRef, @Optional() private directionality: Directionality) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-menu-submenu', 'ant-menu-submenu-popup');
- }
+ constructor(@Optional() private directionality: Directionality) {}
setMouseState(state: boolean): void {
if (!this.nzDisabled) {
diff --git a/components/pagination/pagination-options.component.ts b/components/pagination/pagination-options.component.ts
index 72f902ba56..9ca05aef2c 100644
--- a/components/pagination/pagination-options.component.ts
+++ b/components/pagination/pagination-options.component.ts
@@ -6,7 +6,6 @@
import {
ChangeDetectionStrategy,
Component,
- ElementRef,
EventEmitter,
Input,
OnChanges,
@@ -43,7 +42,8 @@ import { NzPaginationI18nInterface } from 'ng-zorro-antd/i18n';
{{ locale.page }}
- `
+ `,
+ host: { class: 'ant-pagination-options' }
})
export class NzPaginationOptionsComponent implements OnChanges {
@Input() nzSize: 'default' | 'small' = 'default';
@@ -59,10 +59,7 @@ export class NzPaginationOptionsComponent implements OnChanges {
@Output() readonly pageSizeChange = new EventEmitter();
listOfPageSizeOption: Array<{ value: number; label: string }> = [];
- constructor(private elementRef: ElementRef) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-pagination-options');
- }
+ constructor() {}
onPageSizeChange(size: number): void {
if (this.pageSize !== size) {
diff --git a/components/pagination/pagination.component.ts b/components/pagination/pagination.component.ts
index 18b5b483a5..b2f2e38ddd 100644
--- a/components/pagination/pagination.component.ts
+++ b/components/pagination/pagination.component.ts
@@ -8,7 +8,6 @@ import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
- ElementRef,
EventEmitter,
Input,
OnChanges,
@@ -73,6 +72,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'pagination';
>
`,
host: {
+ class: 'ant-pagination',
'[class.ant-pagination-simple]': 'nzSimple',
'[class.ant-pagination-disabled]': 'nzDisabled',
'[class.mini]': `!nzSimple && size === 'small'`,
@@ -163,12 +163,8 @@ export class NzPaginationComponent implements OnInit, OnDestroy, OnChanges {
private cdr: ChangeDetectorRef,
private breakpointService: NzBreakpointService,
protected nzConfigService: NzConfigService,
- @Optional() private directionality: Directionality,
- private elementRef: ElementRef
- ) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-pagination');
- }
+ @Optional() private directionality: Directionality
+ ) {}
ngOnInit(): void {
this.i18n.localeChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
diff --git a/components/radio/radio-group.component.ts b/components/radio/radio-group.component.ts
index 00b6d24c69..b98670ee83 100644
--- a/components/radio/radio-group.component.ts
+++ b/components/radio/radio-group.component.ts
@@ -8,7 +8,6 @@ import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
- ElementRef,
forwardRef,
Input,
OnChanges,
@@ -45,6 +44,7 @@ export type NzRadioButtonStyle = 'outline' | 'solid';
}
],
host: {
+ class: 'ant-radio-group',
'[class.ant-radio-group-large]': `nzSize === 'large'`,
'[class.ant-radio-group-small]': `nzSize === 'small'`,
'[class.ant-radio-group-solid]': `nzButtonStyle === 'solid'`,
@@ -68,12 +68,8 @@ export class NzRadioGroupComponent implements OnInit, ControlValueAccessor, OnDe
constructor(
private cdr: ChangeDetectorRef,
private nzRadioService: NzRadioService,
- private elementRef: ElementRef,
@Optional() private directionality: Directionality
- ) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-radio-group');
- }
+ ) {}
ngOnInit(): void {
this.nzRadioService.selected$.pipe(takeUntil(this.destroy$)).subscribe(value => {
diff --git a/components/resizable/resizable.directive.ts b/components/resizable/resizable.directive.ts
index 973ae87ade..34c6b9c6ea 100644
--- a/components/resizable/resizable.directive.ts
+++ b/components/resizable/resizable.directive.ts
@@ -37,6 +37,7 @@ export interface NzResizeEvent {
exportAs: 'nzResizable',
providers: [NzResizableService],
host: {
+ class: 'nz-resizable',
'[class.nz-resizable-resizing]': 'resizing',
'[class.nz-resizable-disabled]': 'nzDisabled'
}
@@ -76,8 +77,6 @@ export class NzResizableDirective implements AfterViewInit, OnDestroy {
private platform: Platform,
private ngZone: NgZone
) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('nz-resizable');
this.nzResizableService.handleMouseDown$.pipe(takeUntil(this.destroy$)).subscribe(event => {
if (this.nzDisabled) {
return;
diff --git a/components/resizable/resize-handle.component.ts b/components/resizable/resize-handle.component.ts
index b1360a02d4..0cd10cc4a7 100644
--- a/components/resizable/resize-handle.component.ts
+++ b/components/resizable/resize-handle.component.ts
@@ -39,6 +39,7 @@ export class NzResizeHandleMouseDownEvent {
template: ` `,
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
+ class: 'nz-resizable-handle',
'[class.nz-resizable-handle-top]': `nzDirection === 'top'`,
'[class.nz-resizable-handle-right]': `nzDirection === 'right'`,
'[class.nz-resizable-handle-bottom]': `nzDirection === 'bottom'`,
@@ -61,10 +62,7 @@ export class NzResizeHandleComponent implements OnInit, OnDestroy {
private nzResizableService: NzResizableService,
private renderer: Renderer2,
private elementRef: ElementRef
- ) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('nz-resizable-handle');
- }
+ ) {}
ngOnInit(): void {
// Caretaker note: `mouseEntered$` subject will emit events within the `` zone,
diff --git a/components/result/result.component.ts b/components/result/result.component.ts
index 7be5f472a9..2658aa1c10 100644
--- a/components/result/result.component.ts
+++ b/components/result/result.component.ts
@@ -8,7 +8,6 @@ import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
- ElementRef,
Input,
OnChanges,
OnDestroy,
@@ -77,6 +76,7 @@ const ExceptionStatus = ['404', '500', '403'];
`,
host: {
+ class: 'ant-result',
'[class.ant-result-success]': `nzStatus === 'success'`,
'[class.ant-result-error]': `nzStatus === 'error'`,
'[class.ant-result-info]': `nzStatus === 'info'`,
@@ -97,14 +97,7 @@ export class NzResultComponent implements OnChanges, OnDestroy, OnInit {
private destroy$ = new Subject();
- constructor(
- private elementRef: ElementRef,
- private cdr: ChangeDetectorRef,
- @Optional() private directionality: Directionality
- ) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-result');
- }
+ constructor(private cdr: ChangeDetectorRef, @Optional() private directionality: Directionality) {}
ngOnInit(): void {
this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => {
diff --git a/components/select/option-container.component.ts b/components/select/option-container.component.ts
index 287efee0c3..3a86e2b703 100644
--- a/components/select/option-container.component.ts
+++ b/components/select/option-container.component.ts
@@ -8,7 +8,6 @@ import {
AfterViewInit,
ChangeDetectionStrategy,
Component,
- ElementRef,
EventEmitter,
Input,
OnChanges,
@@ -73,7 +72,8 @@ import { NzSelectItemInterface, NzSelectModeType } from './select.types';
- `
+ `,
+ host: { class: 'ant-select-dropdown' }
})
export class NzOptionContainerComponent implements OnChanges, AfterViewInit {
@Input() notFoundContent: string | TemplateRef | undefined = undefined;
@@ -92,10 +92,7 @@ export class NzOptionContainerComponent implements OnChanges, AfterViewInit {
@ViewChild(CdkVirtualScrollViewport, { static: true }) cdkVirtualScrollViewport!: CdkVirtualScrollViewport;
private scrolledIndex = 0;
- constructor(private elementRef: ElementRef) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-select-dropdown');
- }
+ constructor() {}
onItemClick(value: NzSafeAny): void {
this.itemClick.emit(value);
diff --git a/components/select/option-item-group.component.ts b/components/select/option-item-group.component.ts
index d44025aee0..d89157204b 100644
--- a/components/select/option-item-group.component.ts
+++ b/components/select/option-item-group.component.ts
@@ -3,7 +3,7 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
-import { ChangeDetectionStrategy, Component, ElementRef, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
import { NzSafeAny } from 'ng-zorro-antd/core/types';
@@ -11,13 +11,13 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
selector: 'nz-option-item-group',
template: ` {{ nzLabel }} `,
changeDetection: ChangeDetectionStrategy.OnPush,
- encapsulation: ViewEncapsulation.None
+ encapsulation: ViewEncapsulation.None,
+ host: {
+ class: 'ant-select-item ant-select-item-group'
+ }
})
export class NzOptionItemGroupComponent {
@Input() nzLabel: string | number | TemplateRef | null = null;
- constructor(private elementRef: ElementRef) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-select-item', 'ant-select-item-group');
- }
+ constructor() {}
}
diff --git a/components/select/option-item.component.ts b/components/select/option-item.component.ts
index 01c76b7e78..8846297083 100644
--- a/components/select/option-item.component.ts
+++ b/components/select/option-item.component.ts
@@ -6,7 +6,6 @@
import {
ChangeDetectionStrategy,
Component,
- ElementRef,
EventEmitter,
Input,
OnChanges,
@@ -34,6 +33,7 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
host: {
+ class: 'ant-select-item ant-select-item-option',
'[attr.title]': 'label',
'[class.ant-select-item-option-grouped]': 'grouped',
'[class.ant-select-item-option-selected]': 'selected && !disabled',
@@ -60,10 +60,7 @@ export class NzOptionItemComponent implements OnChanges {
@Output() readonly itemClick = new EventEmitter();
@Output() readonly itemHover = new EventEmitter();
- constructor(private elementRef: ElementRef) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-select-item', 'ant-select-item-option');
- }
+ constructor() {}
onHostMouseEnter(): void {
if (!this.disabled) {
diff --git a/components/select/select-arrow.component.ts b/components/select/select-arrow.component.ts
index 67e7e8b15d..9e2d6f0fc3 100644
--- a/components/select/select-arrow.component.ts
+++ b/components/select/select-arrow.component.ts
@@ -3,7 +3,7 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
-import { ChangeDetectionStrategy, Component, ElementRef, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
import { NzSafeAny } from 'ng-zorro-antd/core/types';
@@ -26,6 +26,7 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
`,
host: {
+ class: 'ant-select-arrow',
'[class.ant-select-arrow-loading]': 'loading'
}
})
@@ -34,8 +35,5 @@ export class NzSelectArrowComponent {
@Input() search = false;
@Input() suffixIcon: TemplateRef | string | null = null;
- constructor(private elementRef: ElementRef) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-select-arrow');
- }
+ constructor() {}
}
diff --git a/components/select/select-clear.component.ts b/components/select/select-clear.component.ts
index 4cb26c18a8..0427f9d7b5 100644
--- a/components/select/select-clear.component.ts
+++ b/components/select/select-clear.component.ts
@@ -6,7 +6,6 @@
import {
ChangeDetectionStrategy,
Component,
- ElementRef,
EventEmitter,
Input,
Output,
@@ -30,6 +29,7 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
>
`,
host: {
+ class: 'ant-select-clear',
'(click)': 'onClick($event)'
}
})
@@ -37,10 +37,7 @@ export class NzSelectClearComponent {
@Input() clearIcon: TemplateRef | null = null;
@Output() readonly clear = new EventEmitter();
- constructor(private elementRef: ElementRef) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-select-clear');
- }
+ constructor() {}
onClick(e: MouseEvent): void {
e.preventDefault();
diff --git a/components/select/select-item.component.ts b/components/select/select-item.component.ts
index 40a86d1f90..62272bfc1d 100644
--- a/components/select/select-item.component.ts
+++ b/components/select/select-item.component.ts
@@ -6,7 +6,6 @@
import {
ChangeDetectionStrategy,
Component,
- ElementRef,
EventEmitter,
Input,
Output,
@@ -30,6 +29,7 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
`,
host: {
+ class: 'ant-select-selection-item',
'[attr.title]': 'label',
'[class.ant-select-selection-item-disabled]': 'disabled'
}
@@ -43,10 +43,7 @@ export class NzSelectItemComponent {
@Input() contentTemplateOutlet: string | TemplateRef | null = null;
@Output() readonly delete = new EventEmitter();
- constructor(private elementRef: ElementRef) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-select-selection-item');
- }
+ constructor() {}
onDelete(e: MouseEvent): void {
e.preventDefault();
diff --git a/components/select/select-placeholder.component.ts b/components/select/select-placeholder.component.ts
index 4de84da2ee..59b6a076f8 100644
--- a/components/select/select-placeholder.component.ts
+++ b/components/select/select-placeholder.component.ts
@@ -3,7 +3,7 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
-import { ChangeDetectionStrategy, Component, ElementRef, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
import { NzSafeAny } from 'ng-zorro-antd/core/types';
@@ -15,13 +15,11 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
{{ placeholder }}
- `
+ `,
+ host: { class: 'ant-select-selection-placeholder' }
})
export class NzSelectPlaceholderComponent {
@Input() placeholder: TemplateRef | string | null = null;
- constructor(private elementRef: ElementRef) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-select-selection-placeholder');
- }
+ constructor() {}
}
diff --git a/components/select/select-search.component.ts b/components/select/select-search.component.ts
index 2da848200c..903532275d 100644
--- a/components/select/select-search.component.ts
+++ b/components/select/select-search.component.ts
@@ -40,6 +40,7 @@ import { COMPOSITION_BUFFER_MODE } from '@angular/forms';
/>
`,
+ host: { class: 'ant-select-selection-search' },
providers: [{ provide: COMPOSITION_BUFFER_MODE, useValue: false }]
})
export class NzSelectSearchComponent implements AfterViewInit, OnChanges {
@@ -90,10 +91,7 @@ export class NzSelectSearchComponent implements AfterViewInit, OnChanges {
this.inputElement.nativeElement.blur();
}
- constructor(private elementRef: ElementRef, private renderer: Renderer2, private focusMonitor: FocusMonitor) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-select-selection-search');
- }
+ constructor(private elementRef: ElementRef, private renderer: Renderer2, private focusMonitor: FocusMonitor) {}
ngOnChanges(changes: SimpleChanges): void {
const inputDOM = this.inputElement.nativeElement;
diff --git a/components/select/select-top-control.component.ts b/components/select/select-top-control.component.ts
index 016b379c63..1f6fb51444 100644
--- a/components/select/select-top-control.component.ts
+++ b/components/select/select-top-control.component.ts
@@ -88,7 +88,8 @@ import { NzSelectItemInterface, NzSelectModeType, NzSelectTopControlItemType } f
- `
+ `,
+ host: { class: 'ant-select-selector' }
})
export class NzSelectTopControlComponent implements OnChanges, OnInit, OnDestroy {
@Input() nzId: string | null = null;
@@ -195,10 +196,7 @@ export class NzSelectTopControlComponent implements OnChanges, OnInit, OnDestroy
private elementRef: ElementRef,
private ngZone: NgZone,
@Host() @Optional() public noAnimation: NzNoAnimationDirective | null
- ) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-select-selector');
- }
+ ) {}
ngOnChanges(changes: SimpleChanges): void {
const { listOfTopItem, maxTagCount, customTemplate, maxTagPlaceholder } = changes;
diff --git a/components/select/select.component.ts b/components/select/select.component.ts
index eaf1732a55..8858312961 100644
--- a/components/select/select.component.ts
+++ b/components/select/select.component.ts
@@ -149,6 +149,7 @@ export type NzSelectSizeType = 'large' | 'default' | 'small';
`,
host: {
+ class: 'ant-select',
'[class.ant-select-lg]': 'nzSize === "large"',
'[class.ant-select-sm]': 'nzSize === "small"',
'[class.ant-select-show-arrow]': `nzShowArrow`,
@@ -523,10 +524,7 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterCon
private focusMonitor: FocusMonitor,
@Optional() private directionality: Directionality,
@Host() @Optional() public noAnimation?: NzNoAnimationDirective
- ) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-select');
- }
+ ) {}
writeValue(modelValue: NzSafeAny | NzSafeAny[]): void {
/** https://github.com/angular/angular/issues/14988 **/
diff --git a/components/skeleton/skeleton-element.component.ts b/components/skeleton/skeleton-element.component.ts
index fd289cc71c..d854c736be 100644
--- a/components/skeleton/skeleton-element.component.ts
+++ b/components/skeleton/skeleton-element.component.ts
@@ -3,15 +3,7 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
-import {
- ChangeDetectionStrategy,
- Component,
- Directive,
- ElementRef,
- Input,
- OnChanges,
- SimpleChanges
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, Directive, Input, OnChanges, SimpleChanges } from '@angular/core';
import { InputBoolean } from 'ng-zorro-antd/core/util';
@@ -26,6 +18,7 @@ import {
@Directive({
selector: 'nz-skeleton-element',
host: {
+ class: 'ant-skeleton ant-skeleton-element',
'[class.ant-skeleton-active]': 'nzActive',
'[class.ant-skeleton-block]': 'nzBlock'
}
@@ -35,10 +28,7 @@ export class NzSkeletonElementDirective {
@Input() nzType!: 'button' | 'input' | 'avatar' | 'image';
@Input() @InputBoolean() nzBlock: boolean = false;
- constructor(private elementRef: ElementRef) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-skeleton', 'ant-skeleton-element');
- }
+ constructor() {}
}
@Component({
diff --git a/components/table/src/addon/filter.component.ts b/components/table/src/addon/filter.component.ts
index 2fd3fd2157..3bc9cd0633 100644
--- a/components/table/src/addon/filter.component.ts
+++ b/components/table/src/addon/filter.component.ts
@@ -7,7 +7,6 @@ import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
- ElementRef,
EventEmitter,
Input,
OnChanges,
@@ -74,7 +73,8 @@ interface NzThItemInterface {
- `
+ `,
+ host: { class: 'ant-table-filter-column' }
})
export class NzTableFilterComponent implements OnChanges, OnDestroy, OnInit {
@Input() contentTemplate: TemplateRef | null = null;
@@ -153,10 +153,7 @@ export class NzTableFilterComponent implements OnChanges, OnDestroy, OnInit {
return listOfParsedFilter.some(item => item.checked);
}
- constructor(private cdr: ChangeDetectorRef, private i18n: NzI18nService, private elementRef: ElementRef) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-table-filter-column');
- }
+ constructor(private cdr: ChangeDetectorRef, private i18n: NzI18nService) {}
ngOnInit(): void {
this.i18n.localeChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
diff --git a/components/table/src/addon/row-expand-button.directive.ts b/components/table/src/addon/row-expand-button.directive.ts
index 59660f3199..02254c3569 100644
--- a/components/table/src/addon/row-expand-button.directive.ts
+++ b/components/table/src/addon/row-expand-button.directive.ts
@@ -3,11 +3,12 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
-import { Directive, ElementRef, EventEmitter, Input, Output } from '@angular/core';
+import { Directive, EventEmitter, Input, Output } from '@angular/core';
@Directive({
selector: 'button[nz-row-expand-button]',
host: {
+ class: 'ant-table-row-expand-icon',
'[type]': `'button'`,
'[class.ant-table-row-expand-icon-expanded]': `!spaceMode && expand === true`,
'[class.ant-table-row-expand-icon-collapsed]': `!spaceMode && expand === false`,
@@ -20,10 +21,7 @@ export class NzRowExpandButtonDirective {
@Input() spaceMode = false;
@Output() readonly expandChange = new EventEmitter();
- constructor(private elementRef: ElementRef) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-table-row-expand-icon');
- }
+ constructor() {}
onHostClick(): void {
if (!this.spaceMode) {
diff --git a/components/table/src/addon/row-indent.directive.ts b/components/table/src/addon/row-indent.directive.ts
index f3bb5a80e6..61910ed847 100644
--- a/components/table/src/addon/row-indent.directive.ts
+++ b/components/table/src/addon/row-indent.directive.ts
@@ -3,19 +3,17 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
-import { Directive, ElementRef, Input } from '@angular/core';
+import { Directive, Input } from '@angular/core';
@Directive({
selector: 'nz-row-indent',
host: {
+ class: 'ant-table-row-indent',
'[style.padding-left.px]': 'indentSize'
}
})
export class NzRowIndentDirective {
@Input() indentSize = 0;
- constructor(private elementRef: ElementRef) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-table-row-indent');
- }
+ constructor() {}
}
diff --git a/components/table/src/addon/selection.component.ts b/components/table/src/addon/selection.component.ts
index 4f82f81f39..93d3afa730 100644
--- a/components/table/src/addon/selection.component.ts
+++ b/components/table/src/addon/selection.component.ts
@@ -3,15 +3,7 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
-import {
- ChangeDetectionStrategy,
- Component,
- ElementRef,
- EventEmitter,
- Input,
- Output,
- ViewEncapsulation
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
import { NzSafeAny } from 'ng-zorro-antd/core/types';
@@ -42,7 +34,8 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
- `
+ `,
+ host: { class: 'ant-table-selection' }
})
export class NzTableSelectionComponent {
@Input() listOfSelections: Array<{ text: string; onSelect(...args: NzSafeAny[]): NzSafeAny }> = [];
@@ -53,10 +46,7 @@ export class NzTableSelectionComponent {
@Input() showRowSelection = false;
@Output() readonly checkedChange = new EventEmitter();
- constructor(private elementRef: ElementRef) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-table-selection');
- }
+ constructor() {}
onCheckedChange(checked: boolean): void {
this.checked = checked;
diff --git a/components/table/src/addon/sorters.component.ts b/components/table/src/addon/sorters.component.ts
index 23570c0efa..82e69d6804 100644
--- a/components/table/src/addon/sorters.component.ts
+++ b/components/table/src/addon/sorters.component.ts
@@ -6,7 +6,6 @@
import {
ChangeDetectionStrategy,
Component,
- ElementRef,
Input,
OnChanges,
SimpleChanges,
@@ -43,7 +42,8 @@ import { NzTableSortOrder } from '../table.types';
>
- `
+ `,
+ host: { class: 'ant-table-column-sorters' }
})
export class NzTableSortersComponent implements OnChanges {
@Input() sortDirections: NzTableSortOrder[] = ['ascend', 'descend', null];
@@ -52,10 +52,7 @@ export class NzTableSortersComponent implements OnChanges {
isUp = false;
isDown = false;
- constructor(private elementRef: ElementRef) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-table-column-sorters');
- }
+ constructor() {}
ngOnChanges(changes: SimpleChanges): void {
const { sortDirections } = changes;
diff --git a/components/table/src/cell/th-selection.component.ts b/components/table/src/cell/th-selection.component.ts
index 954589c8f2..61c1887c42 100644
--- a/components/table/src/cell/th-selection.component.ts
+++ b/components/table/src/cell/th-selection.component.ts
@@ -7,7 +7,6 @@
import {
ChangeDetectionStrategy,
Component,
- ElementRef,
EventEmitter,
Input,
OnChanges,
@@ -36,7 +35,8 @@ import { InputBoolean } from 'ng-zorro-antd/core/util';
(checkedChange)="onCheckedChange($event)"
>
- `
+ `,
+ host: { class: 'ant-table-selection-column' }
})
export class NzThSelectionComponent implements OnChanges {
static ngAcceptInputType_nzShowCheckbox: BooleanInput;
@@ -53,10 +53,7 @@ export class NzThSelectionComponent implements OnChanges {
private isNzShowExpandChanged = false;
private isNzShowCheckboxChanged = false;
- constructor(private elementRef: ElementRef) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-table-selection-column');
- }
+ constructor() {}
onCheckedChange(checked: boolean): void {
this.nzChecked = checked;
diff --git a/components/table/src/table/table-inner-default.component.ts b/components/table/src/table/table-inner-default.component.ts
index 10047f5873..e1e64ad6da 100644
--- a/components/table/src/table/table-inner-default.component.ts
+++ b/components/table/src/table/table-inner-default.component.ts
@@ -3,7 +3,7 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
-import { ChangeDetectionStrategy, Component, ElementRef, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
import { NzSafeAny } from 'ng-zorro-antd/core/types';
@@ -23,7 +23,8 @@ import { NzTableLayout } from '../table.types';
[theadTemplate]="theadTemplate"
>
- `
+ `,
+ host: { class: 'ant-table-container' }
})
export class NzTableInnerDefaultComponent {
@Input() tableLayout: NzTableLayout = 'auto';
@@ -31,8 +32,5 @@ export class NzTableInnerDefaultComponent {
@Input() theadTemplate: TemplateRef | null = null;
@Input() contentTemplate: TemplateRef | null = null;
- constructor(private elementRef: ElementRef) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-table-container');
- }
+ constructor() {}
}
diff --git a/components/table/src/table/table-inner-scroll.component.ts b/components/table/src/table/table-inner-scroll.component.ts
index 4b2c9d351d..b27ff343f1 100644
--- a/components/table/src/table/table-inner-scroll.component.ts
+++ b/components/table/src/table/table-inner-scroll.component.ts
@@ -81,7 +81,8 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
[contentTemplate]="contentTemplate"
>
- `
+ `,
+ host: { class: 'ant-table-container' }
})
export class NzTableInnerScrollComponent implements OnChanges, AfterViewInit, OnDestroy {
@Input() data: readonly T[] = [];
@@ -132,12 +133,8 @@ export class NzTableInnerScrollComponent implements OnChanges, AfterViewInit,
private renderer: Renderer2,
private ngZone: NgZone,
private platform: Platform,
- private resizeService: NzResizeService,
- private elementRef: ElementRef
- ) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-table-container');
- }
+ private resizeService: NzResizeService
+ ) {}
ngOnChanges(changes: SimpleChanges): void {
const { scrollX, scrollY, data } = changes;
diff --git a/components/table/src/table/table.component.ts b/components/table/src/table/table.component.ts
index d54cbe827a..2d528638b4 100644
--- a/components/table/src/table/table.component.ts
+++ b/components/table/src/table/table.component.ts
@@ -129,6 +129,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'table';
`,
host: {
+ class: 'ant-table-wrapper',
'[class.ant-table-wrapper-rtl]': 'dir === "rtl"'
}
})
@@ -218,8 +219,6 @@ export class NzTableComponent implements OnInit, OnDestroy, OnChanges, AfterV
private nzTableDataService: NzTableDataService,
@Optional() private directionality: Directionality
) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-table-wrapper');
this.nzConfigService
.getConfigChangeEventForComponent(NZ_CONFIG_MODULE_NAME)
.pipe(takeUntil(this.destroy$))
diff --git a/components/table/src/table/tr-expand.directive.ts b/components/table/src/table/tr-expand.directive.ts
index 83ab3bdbb9..b25c03210d 100644
--- a/components/table/src/table/tr-expand.directive.ts
+++ b/components/table/src/table/tr-expand.directive.ts
@@ -3,19 +3,17 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
-import { Directive, ElementRef, Input } from '@angular/core';
+import { Directive, Input } from '@angular/core';
@Directive({
selector: 'tr[nzExpand]',
host: {
+ class: 'ant-table-expanded-row',
'[hidden]': `!nzExpand`
}
})
export class NzTrExpandDirective {
@Input() nzExpand = true;
- constructor(private elementRef: ElementRef) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-table-expanded-row');
- }
+ constructor() {}
}
diff --git a/components/table/src/table/tr-measure.component.ts b/components/table/src/table/tr-measure.component.ts
index 9a634870a1..cb716e91eb 100644
--- a/components/table/src/table/tr-measure.component.ts
+++ b/components/table/src/table/tr-measure.component.ts
@@ -36,17 +36,15 @@ import { NzResizeObserver } from 'ng-zorro-antd/cdk/resize-observer';
style="padding: 0px; border: 0px; height: 0px;"
*ngFor="let th of listOfMeasureColumn; trackBy: trackByFunc"
>
- `
+ `,
+ host: { class: 'ant-table-measure-now' }
})
export class NzTrMeasureComponent implements AfterViewInit, OnDestroy {
@Input() listOfMeasureColumn: readonly string[] = [];
@Output() readonly listOfAutoWidth = new EventEmitter();
@ViewChildren('tdElement') listOfTdElement!: QueryList;
private destroy$ = new Subject();
- constructor(private nzResizeObserver: NzResizeObserver, private ngZone: NgZone, private elementRef: ElementRef) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-table-measure-now');
- }
+ constructor(private nzResizeObserver: NzResizeObserver, private ngZone: NgZone) {}
trackByFunc(_: number, key: string): string {
return key;
}
diff --git a/components/tag/tag.component.ts b/components/tag/tag.component.ts
index 0680bc9d85..39629a2ad4 100644
--- a/components/tag/tag.component.ts
+++ b/components/tag/tag.component.ts
@@ -52,6 +52,7 @@ import { InputBoolean } from 'ng-zorro-antd/core/util';
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
host: {
+ class: 'ant-tag',
'[style.background-color]': `isPresetColor ? '' : nzColor`,
'[class.ant-tag-has-color]': `nzColor && !isPresetColor`,
'[class.ant-tag-checkable]': `nzMode === 'checkable'`,
@@ -76,10 +77,7 @@ export class NzTagComponent implements OnChanges, OnDestroy, OnInit {
private renderer: Renderer2,
private elementRef: ElementRef,
@Optional() private directionality: Directionality
- ) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-tag');
- }
+ ) {}
updateCheckedStatus(): void {
if (this.nzMode === 'checkable') {
@@ -95,13 +93,6 @@ export class NzTagComponent implements OnChanges, OnDestroy, OnInit {
}
}
- /**
- * @deprecated
- * move to host after View Engine deprecation
- * host: {
- * '[class]': `isPresetColor ? ('ant-tag-' + nzColor) : ''`
- * }
- */
private clearPresetColor(): void {
const hostElement = this.elementRef.nativeElement as HTMLElement;
// /(ant-tag-(?:pink|red|...))/g
@@ -116,13 +107,6 @@ export class NzTagComponent implements OnChanges, OnDestroy, OnInit {
hostElement.classList.remove(...matches);
}
- /**
- * @deprecated
- * move to host after View Engine deprecation
- * host: {
- * '[class]': `isPresetColor ? ('ant-tag-' + nzColor) : ''`
- * }
- */
private setPresetColor(): void {
const hostElement = this.elementRef.nativeElement as HTMLElement;
this.clearPresetColor();
diff --git a/components/time-picker/time-picker-panel.component.ts b/components/time-picker/time-picker-panel.component.ts
index cd30378744..c64d0d5fa6 100644
--- a/components/time-picker/time-picker-panel.component.ts
+++ b/components/time-picker/time-picker-panel.component.ts
@@ -119,6 +119,7 @@ export type NzTimePickerUnit = 'hour' | 'minute' | 'second' | '12-hour';
`,
host: {
+ class: 'ant-picker-time-panel',
'[class.ant-picker-time-panel-column-0]': `enabledColumns === 0 && !nzInDatePicker`,
'[class.ant-picker-time-panel-column-1]': `enabledColumns === 1 && !nzInDatePicker`,
'[class.ant-picker-time-panel-column-2]': `enabledColumns === 2 && !nzInDatePicker`,
@@ -524,10 +525,7 @@ export class NzTimePickerPanelComponent implements ControlValueAccessor, OnInit,
private cdr: ChangeDetectorRef,
public dateHelper: DateHelperService,
private elementRef: ElementRef
- ) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-picker-time-panel');
- }
+ ) {}
ngOnInit(): void {
this.time.changes.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
diff --git a/components/time-picker/time-picker.component.ts b/components/time-picker/time-picker.component.ts
index 091ae1ee83..e937001761 100644
--- a/components/time-picker/time-picker.component.ts
+++ b/components/time-picker/time-picker.component.ts
@@ -114,6 +114,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'timePicker';
`,
host: {
+ class: 'ant-picker',
'[class.ant-picker-large]': `nzSize === 'large'`,
'[class.ant-picker-small]': `nzSize === 'small'`,
'[class.ant-picker-disabled]': `nzDisabled`,
@@ -323,12 +324,8 @@ export class NzTimePickerComponent implements ControlValueAccessor, OnInit, Afte
private cdr: ChangeDetectorRef,
private dateHelper: DateHelperService,
private platform: Platform,
- private elementRef: ElementRef,
@Optional() private directionality: Directionality
- ) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-picker');
- }
+ ) {}
ngOnInit(): void {
this.inputSize = Math.max(8, this.nzFormat.length) + 2;
diff --git a/components/transfer/transfer-list.component.ts b/components/transfer/transfer-list.component.ts
index a0a307efd5..415dd3aa9f 100644
--- a/components/transfer/transfer-list.component.ts
+++ b/components/transfer/transfer-list.component.ts
@@ -7,7 +7,6 @@ import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
- ElementRef,
EventEmitter,
Input,
Output,
@@ -108,6 +107,7 @@ import { TransferDirection, TransferItem } from './interface';
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
+ class: 'ant-transfer-list',
'[class.ant-transfer-list-with-footer]': '!!footer'
}
})
@@ -203,10 +203,7 @@ export class NzTransferListComponent {
// #endregion
- constructor(private cdr: ChangeDetectorRef, private elementRef: ElementRef) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-transfer-list');
- }
+ constructor(private cdr: ChangeDetectorRef) {}
markForCheck(): void {
this.updateCheckStatus();
diff --git a/components/transfer/transfer.component.ts b/components/transfer/transfer.component.ts
index 9d96edee83..d195344bd4 100644
--- a/components/transfer/transfer.component.ts
+++ b/components/transfer/transfer.component.ts
@@ -8,7 +8,6 @@ import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
- ElementRef,
EventEmitter,
Input,
OnChanges,
@@ -136,6 +135,7 @@ import { NzTransferListComponent } from './transfer-list.component';
>
`,
host: {
+ class: 'ant-transfer',
'[class.ant-transfer-rtl]': `dir === 'rtl'`,
'[class.ant-transfer-disabled]': `nzDisabled`,
'[class.ant-transfer-customize-list]': `nzRenderList`
@@ -282,12 +282,8 @@ export class NzTransferComponent implements OnInit, OnChanges, OnDestroy {
constructor(
private cdr: ChangeDetectorRef,
private i18n: NzI18nService,
- private elementRef: ElementRef,
@Optional() private directionality: Directionality
- ) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-transfer');
- }
+ ) {}
private markForCheckAllList(): void {
if (!this.lists) {
diff --git a/components/tree-select/tree-select.component.ts b/components/tree-select/tree-select.component.ts
index b69e60db83..83814013f2 100644
--- a/components/tree-select/tree-select.component.ts
+++ b/components/tree-select/tree-select.component.ts
@@ -193,6 +193,7 @@ const TREE_SELECT_DEFAULT_CLASS = 'ant-select-dropdown ant-select-tree-dropdown'
}
],
host: {
+ class: 'ant-select',
'[class.ant-select-lg]': 'nzSize==="large"',
'[class.ant-select-rtl]': 'dir==="rtl"',
'[class.ant-select-sm]': 'nzSize==="small"',
@@ -321,8 +322,7 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc
@Host() @Optional() public noAnimation?: NzNoAnimationDirective
) {
super(nzTreeService);
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-select');
+
this.renderer.addClass(this.elementRef.nativeElement, 'ant-select');
this.renderer.addClass(this.elementRef.nativeElement, 'ant-tree-select');
}
diff --git a/components/upload/upload-btn.component.ts b/components/upload/upload-btn.component.ts
index 6b31ffc1c4..dc6b755d1e 100644
--- a/components/upload/upload-btn.component.ts
+++ b/components/upload/upload-btn.component.ts
@@ -29,6 +29,7 @@ import { NzUploadFile, NzUploadXHRArgs, ZipButtonOptions } from './interface';
exportAs: 'nzUploadBtn',
templateUrl: './upload-btn.component.html',
host: {
+ class: 'ant-upload',
'[attr.tabindex]': '"0"',
'[attr.role]': '"button"',
'[class.ant-upload-disabled]': 'options.disabled',
@@ -341,9 +342,6 @@ export class NzUploadBtnComponent implements OnInit, OnDestroy {
}
constructor(private ngZone: NgZone, @Optional() private http: HttpClient, private elementRef: ElementRef) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-upload');
-
if (!http) {
throw new Error(`Not found 'HttpClient', You can import 'HttpClientModule' in your root module.`);
}
diff --git a/components/upload/upload-list.component.ts b/components/upload/upload-list.component.ts
index 86c43b3b13..7a35fb816f 100644
--- a/components/upload/upload-list.component.ts
+++ b/components/upload/upload-list.component.ts
@@ -11,7 +11,6 @@ import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
- ElementRef,
Inject,
Input,
NgZone,
@@ -53,6 +52,7 @@ interface UploadListFile extends NzUploadFile {
])
],
host: {
+ class: 'ant-upload-list',
'[class.ant-upload-list-rtl]': `dir === 'rtl'`,
'[class.ant-upload-list-text]': `listType === 'text'`,
'[class.ant-upload-list-picture]': `listType === 'picture'`,
@@ -257,12 +257,8 @@ export class NzUploadListComponent implements OnChanges, OnDestroy {
private cdr: ChangeDetectorRef,
@Inject(DOCUMENT) private doc: NzSafeAny,
private ngZone: NgZone,
- private platform: Platform,
- private elementRef: ElementRef
- ) {
- // TODO: move to host after View Engine deprecation
- this.elementRef.nativeElement.classList.add('ant-upload-list');
- }
+ private platform: Platform
+ ) {}
detectChanges(): void {
this.fixData();