NG-ZORRO · vthinkxie · Aug 17, 2017 · Aug 16, 2017
diff --git a/src/components/badge/nz-badge.component.ts b/src/components/badge/nz-badge.component.ts
@@ -43,7 +43,7 @@ export class NzBadgeComponent implements OnInit {
   countArray = [];
   countSingleArray = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ];
   @ContentChild('content') content: TemplateRef<any>;
-  @HostBinding('class.ant-badge') true;
+  @HostBinding('class.ant-badge') _nzBadge = true;
 
   @HostBinding('class.ant-badge-not-a-wrapper')
   get setNoWrapper() {

diff --git a/src/components/breadcrumb/nz-breadcrumb.component.ts b/src/components/breadcrumb/nz-breadcrumb.component.ts
@@ -17,7 +17,7 @@ import {
 })
 export class NzBreadCrumbComponent {
   @Input() nzSeparator = '/';
-  @HostBinding('class.ant-breadcrumb') true;
+  @HostBinding('class.ant-breadcrumb') _nzBreadcrumb = true;
 
   constructor() {
   }

diff --git a/src/components/card/nz-card-grid.directive.ts b/src/components/card/nz-card-grid.directive.ts
@@ -4,5 +4,5 @@ import { Directive, HostBinding } from '@angular/core';
   selector: '[nz-card-grid]'
 })
 export class NzCardGridDirective {
-  @HostBinding('class.ant-card-grid') true;
+  @HostBinding('class.ant-card-grid') _nzCardGrid = true;
 }
diff --git a/src/components/card/nz-card.component.ts b/src/components/card/nz-card.component.ts
@@ -57,5 +57,5 @@ export class NzCardComponent {
   @ContentChild('title') title: TemplateRef<any>;
   @ContentChild('extra') extra: TemplateRef<any>;
   @ContentChild('body') body: TemplateRef<any>;
-  @HostBinding('class.ant-card') true;
+  @HostBinding('class.ant-card') _nzCard = true;
 }
diff --git a/src/components/carousel/nz-carousel-content.directive.ts b/src/components/carousel/nz-carousel-content.directive.ts
@@ -12,7 +12,7 @@ export class NzCarouselContentDirective {
   top = null;
   fadeMode = false;
 
-  @HostBinding('class.slick-slide') true;
+  @HostBinding('class.slick-slide') _nzSlickSlide = true;
 
   @HostBinding('class.slick-active')
   get setActiveClass() {

diff --git a/src/components/carousel/nz-carousel.component.ts b/src/components/carousel/nz-carousel.component.ts
@@ -44,7 +44,7 @@ export class NzCarouselComponent implements AfterViewInit, OnDestroy {
   @Input() nzDots = true;
   @Input() nzEffect = 'scrollx';
   @Input() @HostBinding('class.ant-carousel-vertical') nzVertical = false;
-  @HostBinding('class.ant-carousel') true;
+  @HostBinding('class.ant-carousel') _nzCarousel = true;
 
   constructor(public hostElement: ElementRef, private _renderer: Renderer2) {
   }

diff --git a/src/components/collapse/nz-collapse.component.ts b/src/components/collapse/nz-collapse.component.ts
@@ -46,7 +46,7 @@ export class NzCollapseComponent {
   _el;
   _active: boolean;
 
-  @HostBinding('class.ant-collapse-item') true;
+  @HostBinding('class.ant-collapse-item') _nzCollapseItem = true;
 
   @Input() nzTitle: string;
   @Input()

diff --git a/src/components/datepicker/nz-datepicker.component.ts b/src/components/datepicker/nz-datepicker.component.ts
@@ -208,7 +208,7 @@ export class NzDatePickerComponent implements ControlValueAccessor, OnInit {
   @Input() nzDisabled = false;
   @ViewChild('trigger') trigger;
   @ViewChild(NzTimePickerInnerComponent) timePickerInner: NzTimePickerInnerComponent;
-  @HostBinding('class.ant-calendar-picker') true;
+  @HostBinding('class.ant-calendar-picker') _nzCalendarPicker = true;
 
   _setTriggerWidth(): void {
     this._triggerWidth = this.trigger.nativeElement.getBoundingClientRect().width;

diff --git a/src/components/form/nz-form-control.component.ts b/src/components/form/nz-form-control.component.ts
@@ -17,7 +17,7 @@ import { Component, HostBinding, Input } from '@angular/core';
 
 export class NzFormControlComponent {
   _hasFeedback = false;
-  @HostBinding(`class.ant-form-item-control-wrapper`) true;
+  @HostBinding(`class.ant-form-item-control-wrapper`) _nzFormItemControlWrapper = true;
 
   @Input()
   set nzHasFeedback(value: boolean|string) {

diff --git a/src/components/form/nz-form-explain.directive.ts b/src/components/form/nz-form-explain.directive.ts
@@ -11,7 +11,7 @@ import { NzFormItemDirective } from './nz-form-item.directive';
 })
 
 export class NzFormExplainComponent implements OnDestroy, OnInit {
-  @HostBinding(`class.ant-form-explain`) true;
+  @HostBinding(`class.ant-form-explain`) _nzFormExplain = true;
 
   constructor(private _nzFormItem: NzFormItemDirective) {
   }

diff --git a/src/components/form/nz-form-extra.directive.ts b/src/components/form/nz-form-extra.directive.ts
@@ -5,5 +5,5 @@ import { Directive, HostBinding } from '@angular/core';
 })
 
 export class NzFormExtraDirective {
-  @HostBinding(`class.ant-form-extra`) true;
+  @HostBinding(`class.ant-form-extra`) _nzFormExtra = true;
 }
diff --git a/src/components/form/nz-form-item.directive.ts b/src/components/form/nz-form-item.directive.ts
@@ -7,7 +7,7 @@ import { Directive, HostBinding } from '@angular/core';
 export class NzFormItemDirective {
   _withHelp = 0;
 
-  @HostBinding(`class.ant-form-item`) true;
+  @HostBinding(`class.ant-form-item`) _nzFormItem = true;
 
   enableHelp() {
     this._withHelp++;

diff --git a/src/components/form/nz-form-label.directive.ts b/src/components/form/nz-form-label.directive.ts
@@ -5,5 +5,5 @@ import { Directive, HostBinding } from '@angular/core';
 })
 
 export class NzFormLabelDirective {
-  @HostBinding(`class.ant-form-item-label`) true;
+  @HostBinding(`class.ant-form-item-label`) _nzFormItemLabel = true;
 }
diff --git a/src/components/form/nz-form-split.directive.ts b/src/components/form/nz-form-split.directive.ts
@@ -5,5 +5,5 @@ import { Directive, HostBinding } from '@angular/core';
 })
 
 export class NzFormSplitDirective {
-  @HostBinding(`class.ant-form-split`) true;
+  @HostBinding(`class.ant-form-split`) _nzFormSplit = true;
 }
diff --git a/src/components/form/nz-form-text.directive.ts b/src/components/form/nz-form-text.directive.ts
@@ -5,5 +5,5 @@ import { Directive, HostBinding } from '@angular/core';
 })
 
 export class NzFormTextDirective {
-  @HostBinding(`class.ant-form-text`) true;
+  @HostBinding(`class.ant-form-text`) _nzFormText = true;
 }
diff --git a/src/components/input/nz-input.directive.component.ts b/src/components/input/nz-input.directive.component.ts
@@ -28,7 +28,7 @@ export class NzInputDirectiveComponent {
     this.size = { large: 'lg', small: 'sm' }[ value ];
   }
 
-  @HostBinding(`class.ant-input`) true;
+  @HostBinding(`class.ant-input`) _nzInput = true;
 
 
   @HostBinding(`class.ant-input-lg`)

diff --git a/src/components/layout/nz-content.component.ts b/src/components/layout/nz-content.component.ts
@@ -9,5 +9,5 @@ import { Component, HostBinding, ViewEncapsulation } from '@angular/core';
 })
 
 export class NzContentComponent {
-  @HostBinding('class.ant-layout-content') true;
+  @HostBinding('class.ant-layout-content') _nzLayoutContent = true;
 }
diff --git a/src/components/layout/nz-footer.component.ts b/src/components/layout/nz-footer.component.ts
@@ -9,5 +9,5 @@ import { Component, HostBinding, ViewEncapsulation } from '@angular/core';
 })
 
 export class NzFooterComponent {
-  @HostBinding('class.ant-layout-footer') true;
+  @HostBinding('class.ant-layout-footer') _nzLayoutFooter = true;
 }
diff --git a/src/components/layout/nz-header.component.ts b/src/components/layout/nz-header.component.ts
@@ -8,5 +8,5 @@ import { Component, HostBinding } from '@angular/core';
 })
 
 export class NzHeaderComponent {
-  @HostBinding('class.ant-layout-header') true;
+  @HostBinding('class.ant-layout-header') _nzLayoutHeader = true;
 }
diff --git a/src/components/layout/nz-layout.component.ts b/src/components/layout/nz-layout.component.ts
@@ -15,5 +15,5 @@ import { Component, HostBinding, ViewEncapsulation } from '@angular/core';
 export class NzLayoutComponent {
   @HostBinding('class.ant-layout-has-sider') hasSider = false;
 
-  @HostBinding('class.ant-layout') true;
+  @HostBinding('class.ant-layout') _nzLayout = true;
 }
diff --git a/src/components/layout/nz-sider.component.ts b/src/components/layout/nz-sider.component.ts
@@ -57,7 +57,7 @@ export class NzSiderComponent {
   }
 
   @Output() nzCollapsedChange = new EventEmitter();
-  @HostBinding('class.ant-layout-sider') true;
+  @HostBinding('class.ant-layout-sider') _nzLayoutSider = true;
 
   @HostBinding('class.ant-layout-sider-zero-width')
   get setZeroClass() {

diff --git a/src/components/menu/nz-menu-divider.component.ts b/src/components/menu/nz-menu-divider.component.ts
@@ -7,5 +7,5 @@ import { Component, HostBinding } from '@angular/core';
 })
 
 export class NzMenuDividerComponent {
-  @HostBinding('class.ant-dropdown-menu-item-divider') true;
+  @HostBinding('class.ant-dropdown-menu-item-divider') _nzDropdownMenuItemDivider = true;
 }
diff --git a/src/components/menu/nz-menu-group.component.ts b/src/components/menu/nz-menu-group.component.ts
@@ -14,5 +14,5 @@ import {
 })
 
 export class NzMenuGroupComponent {
-  @HostBinding('class.ant-menu-item-group') true;
+  @HostBinding('class.ant-menu-item-group') _nzMenuItemGroup = true;
 }
diff --git a/src/components/table/nz-table-divider.directive.ts b/src/components/table/nz-table-divider.directive.ts
@@ -5,5 +5,5 @@ import { Directive, HostBinding } from '@angular/core';
 })
 
 export class NzTableDividerDirective {
-  @HostBinding(`class.ant-divider`) true;
+  @HostBinding(`class.ant-divider`) _nzDivider = true;
 }
diff --git a/src/components/table/nz-tbody-tr.directive.ts b/src/components/table/nz-tbody-tr.directive.ts
@@ -5,5 +5,5 @@ import { Directive, HostBinding } from '@angular/core';
 })
 
 export class NzTbodyTrDirective {
-  @HostBinding(`class.ant-table-row`) true;
+  @HostBinding(`class.ant-table-row`) _nzTableRow = true;
 }
diff --git a/src/components/table/nz-tbody.directive.ts b/src/components/table/nz-tbody.directive.ts
@@ -5,5 +5,5 @@ import { Directive, HostBinding } from '@angular/core';
 })
 
 export class NzTbodyDirective {
-  @HostBinding(`class.ant-table-tbody`) true;
+  @HostBinding(`class.ant-table-tbody`) _nzTableTbody = true;
 }
diff --git a/src/components/table/nz-thead.directive.ts b/src/components/table/nz-thead.directive.ts
@@ -4,7 +4,7 @@ import { Directive, HostBinding } from '@angular/core';
 })
 
 export class NzTheadDirective {
-  @HostBinding(`class.ant-table-thead`) true;
+  @HostBinding(`class.ant-table-thead`) _nzTableThead = true;
 
   constructor() {
 

diff --git a/src/components/tabs/nz-tab-label.directive.ts b/src/components/tabs/nz-tab-label.directive.ts
@@ -4,7 +4,7 @@ import { Directive, ElementRef, HostBinding, Input } from '@angular/core';
   selector: '[nz-tab-label]'
 })
 export class NzTabLabelDirective {
-  @HostBinding('class.ant-tabs-tab') true;
+  @HostBinding('class.ant-tabs-tab') _nzTabsTab = true;
 
   @Input() @HostBinding('class.ant-tabs-tab-disabled') disabled = false;
 

diff --git a/src/components/tabs/nz-tab.component.ts b/src/components/tabs/nz-tab.component.ts
@@ -33,7 +33,7 @@ export class NzTabComponent implements OnDestroy, OnInit {
   @Output() nzClick = new EventEmitter();
   @Output() nzDeselect = new EventEmitter();
   @ContentChild('nzTabHeading') _tabHeading: TemplateRef<any>;
-  @HostBinding('class.ant-tabs-tabpane') true;
+  @HostBinding('class.ant-tabs-tabpane') _nzTabsTabpane = true;
   @ViewChild(TemplateRef) _content: TemplateRef<any>;
 
   get content(): TemplateRef<any> | null {

diff --git a/src/components/tabs/nz-tabs-ink-bar.directive.ts b/src/components/tabs/nz-tabs-ink-bar.directive.ts
@@ -6,7 +6,7 @@ export type NzTabPositionMode = 'horizontal' | 'vertical';
   selector: '[nz-tabs-ink-bar]',
 })
 export class NzTabsInkBarDirective {
-  @HostBinding('class.ant-tabs-ink-bar') true
+  @HostBinding('class.ant-tabs-ink-bar') _nzTabsInkBar = true
   @Input() @HostBinding('class.ant-tabs-ink-bar-animated') nzAnimated: boolean;
 
   @Input() nzPositionMode: NzTabPositionMode = 'horizontal';

diff --git a/src/components/tabs/nz-tabs-nav.component.ts b/src/components/tabs/nz-tabs-nav.component.ts
@@ -93,7 +93,7 @@ export class NzTabsNavComponent implements AfterContentChecked, AfterContentInit
   @ViewChild(NzTabsInkBarDirective) _inkBar: NzTabsInkBarDirective;
   @ViewChild('tabListContainer') _tabListContainer: ElementRef;
   @ViewChild('tabList') _tabList: ElementRef;
-  @HostBinding('class.ant-tabs-bar') true;
+  @HostBinding('class.ant-tabs-bar') _nzTabsBar = true;
   @Input() nzShowPagination = true;
 
   @Input()