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();