diff --git a/src/components/anchor/nz-anchor-link.component.ts b/src/components/anchor/nz-anchor-link.component.ts
index b3cd45fe7f8..0d88e0d988b 100644
--- a/src/components/anchor/nz-anchor-link.component.ts
+++ b/src/components/anchor/nz-anchor-link.component.ts
@@ -20,7 +20,10 @@ import { NzAnchorComponent } from './nz-anchor.component';
       <ng-template *ngIf="nzTemplate" [ngTemplateOutlet]="nzTemplate"></ng-template>
     </a>
     <ng-content></ng-content>
-  `
+  `,
+  host: {
+    '[class.ant-anchor-link]': 'true'
+  }
 })
 export class NzAnchorLinkComponent {
 
@@ -30,8 +33,6 @@ export class NzAnchorLinkComponent {
 
   @ContentChild('nzTemplate') nzTemplate: TemplateRef<any>;
 
-  @HostBinding('class.ant-anchor-link') _nzAnchorLink = true;
-
   @HostBinding('class.ant-anchor-link-active') active: boolean = false;
 
   @HostListener('click')
diff --git a/src/components/badge/nz-badge.component.ts b/src/components/badge/nz-badge.component.ts
index 87f70e8973b..93a686fd4be 100644
--- a/src/components/badge/nz-badge.component.ts
+++ b/src/components/badge/nz-badge.component.ts
@@ -59,7 +59,10 @@ import { toBoolean } from '../util/convert';
   styleUrls    : [
     './style/index.less',
     './style/patch.less'
-  ]
+  ],
+  host: {
+    '[class.ant-badge]': 'true'
+  }
 })
 export class NzBadgeComponent implements OnInit {
   private _showDot = false;
@@ -69,7 +72,6 @@ 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') _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
index 67bd4d29523..bb46f55e81e 100755
--- a/src/components/breadcrumb/nz-breadcrumb.component.ts
+++ b/src/components/breadcrumb/nz-breadcrumb.component.ts
@@ -13,9 +13,11 @@ import {
   styleUrls    : [
     './style/index.less',
     './style/patch.less'
-  ]
+  ],
+  host: {
+    '[class.ant-breadcrumb]': 'true'
+  }
 })
 export class NzBreadCrumbComponent {
   @Input() nzSeparator = '/';
-  @HostBinding('class.ant-breadcrumb') _nzBreadcrumb = true;
 }
diff --git a/src/components/card/nz-card-grid.directive.ts b/src/components/card/nz-card-grid.directive.ts
index 61d60210c7b..68a605a90e2 100644
--- a/src/components/card/nz-card-grid.directive.ts
+++ b/src/components/card/nz-card-grid.directive.ts
@@ -1,8 +1,9 @@
 import { Directive, HostBinding } from '@angular/core';
 
 @Directive({
-  selector: '[nz-card-grid]'
+  selector: '[nz-card-grid]',
+  host: {
+    '[class.ant-card-grid]': 'true'
+  }
 })
-export class NzCardGridDirective {
-  @HostBinding('class.ant-card-grid') _nzCardGrid = true;
-}
+export class NzCardGridDirective { }
diff --git a/src/components/card/nz-card.component.ts b/src/components/card/nz-card.component.ts
index b08b1e865f0..0868c0edaab 100755
--- a/src/components/card/nz-card.component.ts
+++ b/src/components/card/nz-card.component.ts
@@ -49,7 +49,10 @@ import { toBoolean } from '../util/convert';
   styleUrls    : [
     './style/index.less',
     './style/patch.less'
-  ]
+  ],
+  host: {
+    '[class.ant-card]': 'true'
+  }
 })
 export class NzCardComponent {
   private _borderd = true;
@@ -69,7 +72,6 @@ export class NzCardComponent {
   @ContentChild('title') title: TemplateRef<any>;
   @ContentChild('extra') extra: TemplateRef<any>;
   @ContentChild('body') body: TemplateRef<any>;
-  @HostBinding('class.ant-card') _nzCard = true;
 
   @Input()
   set nzLoading(value: boolean) {
diff --git a/src/components/carousel/nz-carousel-content.directive.ts b/src/components/carousel/nz-carousel-content.directive.ts
index 457ce85d6e6..720eb13c139 100755
--- a/src/components/carousel/nz-carousel-content.directive.ts
+++ b/src/components/carousel/nz-carousel-content.directive.ts
@@ -6,6 +6,9 @@ import {
 
 @Directive({
   selector: '[nz-carousel-content]',
+  host: {
+    '[class.slick-slide]': 'true'
+  }
 })
 export class NzCarouselContentDirective {
   width = 0;
@@ -15,8 +18,6 @@ export class NzCarouselContentDirective {
   fadeMode = false
   nativeElement: HTMLElement;
 
-  @HostBinding('class.slick-slide') _nzSlickSlide = true;
-
   @HostBinding('class.slick-active')
   get setActiveClass() {
     return this.isActive === true;
diff --git a/src/components/carousel/nz-carousel.component.ts b/src/components/carousel/nz-carousel.component.ts
index eb527ac11c3..895d9660de2 100755
--- a/src/components/carousel/nz-carousel.component.ts
+++ b/src/components/carousel/nz-carousel.component.ts
@@ -32,7 +32,10 @@ import { toBoolean } from '../util/convert';
   styleUrls    : [
     './style/index.less',
     './style/patch.less'
-  ]
+  ],
+  host: {
+    '[class.ant-carousel]': 'true'
+  }
 })
 export class NzCarouselComponent implements AfterViewInit, OnDestroy {
   private _autoPlay = false;
@@ -52,7 +55,6 @@ export class NzCarouselComponent implements AfterViewInit, OnDestroy {
   @ViewChild('slickList') slickList: ElementRef;
   @ViewChild('slickTrack') slickTrack: ElementRef;
   @Input() nzEffect = 'scrollx';
-  @HostBinding('class.ant-carousel') _nzCarousel = true;
 
   @Input()
   set nzDots(value: boolean) {
diff --git a/src/components/collapse/nz-collapse.component.ts b/src/components/collapse/nz-collapse.component.ts
index 5c33a3a915d..120b4dd92fe 100644
--- a/src/components/collapse/nz-collapse.component.ts
+++ b/src/components/collapse/nz-collapse.component.ts
@@ -45,7 +45,10 @@ import { toBoolean } from '../util/convert';
       transition('inactive => active', animate('150ms ease-in')),
       transition('active => inactive', animate('150ms ease-out'))
     ])
-  ]
+  ],
+  host: {
+    '[class.ant-collapse-item]': 'true'
+  }
 })
 
 export class NzCollapseComponent {
@@ -54,8 +57,6 @@ export class NzCollapseComponent {
 
   _el;
 
-  @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
index 3af871ca6a1..7c66b764fdb 100644
--- a/src/components/datepicker/nz-datepicker.component.ts
+++ b/src/components/datepicker/nz-datepicker.component.ts
@@ -181,7 +181,10 @@ import { NzLocaleService } from '../locale/index';
   styleUrls    : [
     './style/index.less',
     './style/patch.less'
-  ]
+  ],
+  host: {
+    '[class.ant-calendar-picker]': 'true'
+  }
 })
 export class NzDatePickerComponent implements ControlValueAccessor, OnInit {
   private _allowClear = true;
@@ -212,7 +215,6 @@ export class NzDatePickerComponent implements ControlValueAccessor, OnInit {
   @Input() nzMode: 'day' | 'month' = 'day';
   @ViewChild('trigger') trigger;
   @ViewChild(NzTimePickerInnerComponent) timePickerInner: NzTimePickerInnerComponent;
-  @HostBinding('class.ant-calendar-picker') _nzCalendarPicker = true;
 
   @Input()
   set nzAllowClear(value: boolean) {
diff --git a/src/components/dropdown/nz-dropdown.directive.ts b/src/components/dropdown/nz-dropdown.directive.ts
index 59c8ec265d2..1c16666ff97 100644
--- a/src/components/dropdown/nz-dropdown.directive.ts
+++ b/src/components/dropdown/nz-dropdown.directive.ts
@@ -2,9 +2,11 @@ import { Directive, ElementRef, HostBinding } from '@angular/core';
 
 @Directive({
   selector: '[nz-dropdown]',
+  host: {
+    '[class.ant-dropdown-trigger]': 'true'
+  }
 })
 export class NzDropDownDirective {
-  @HostBinding('class.ant-dropdown-trigger') _dropDownTrigger = true;
   constructor(public elementRef: ElementRef) {
   }
 }
diff --git a/src/components/form/nz-form-control.component.ts b/src/components/form/nz-form-control.component.ts
index aa82051a69a..b2dfb2961c8 100644
--- a/src/components/form/nz-form-control.component.ts
+++ b/src/components/form/nz-form-control.component.ts
@@ -13,11 +13,13 @@ import { toBoolean } from '../util/convert';
       <ng-content></ng-content>
     </div>
   `,
-  styles  : []
+  styles  : [],
+  host: {
+    '[class.ant-form-item-control-wrapper]': 'true'
+  }
 })
 export class NzFormControlComponent {
   private _hasFeedback = false;
-  @HostBinding(`class.ant-form-item-control-wrapper`) _nzFormItemControlWrapper = true;
 
   @Input()
   set nzHasFeedback(value: boolean) {
diff --git a/src/components/form/nz-form-explain.directive.ts b/src/components/form/nz-form-explain.directive.ts
index d897a82e3d9..7e363c1158c 100644
--- a/src/components/form/nz-form-explain.directive.ts
+++ b/src/components/form/nz-form-explain.directive.ts
@@ -7,11 +7,12 @@ import { NzFormItemDirective } from './nz-form-item.directive';
   template     : `
     <ng-content></ng-content>
   `,
-  styles       : []
+  styles       : [],
+  host: {
+    '[class.ant-form-explain]': 'true'
+  }
 })
 export class NzFormExplainComponent implements OnDestroy, OnInit {
-  @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
index e2dea0308e0..151ab23bf76 100644
--- a/src/components/form/nz-form-extra.directive.ts
+++ b/src/components/form/nz-form-extra.directive.ts
@@ -1,8 +1,9 @@
 import { Directive, HostBinding } from '@angular/core';
 
 @Directive({
-  selector: '[nz-form-extra]'
+  selector: '[nz-form-extra]',
+  host: {
+    '[class.ant-form-extra]': 'true'
+  }
 })
-export class NzFormExtraDirective {
-  @HostBinding(`class.ant-form-extra`) _nzFormExtra = true;
-}
+export class NzFormExtraDirective { }
diff --git a/src/components/form/nz-form-item.directive.ts b/src/components/form/nz-form-item.directive.ts
index ec135da8d04..7fdd4b2dee4 100644
--- a/src/components/form/nz-form-item.directive.ts
+++ b/src/components/form/nz-form-item.directive.ts
@@ -1,13 +1,14 @@
 import { Directive, HostBinding } from '@angular/core';
 
 @Directive({
-  selector: '[nz-form-item]'
+  selector: '[nz-form-item]',
+  host: {
+    '[class.ant-form-item]': 'true'
+  }
 })
 export class NzFormItemDirective {
   _withHelp = 0;
 
-  @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
index 85e0f63d111..5207ef51a20 100644
--- a/src/components/form/nz-form-label.directive.ts
+++ b/src/components/form/nz-form-label.directive.ts
@@ -1,8 +1,9 @@
 import { Directive, HostBinding } from '@angular/core';
 
 @Directive({
-  selector: '[nz-form-label]'
+  selector: '[nz-form-label]',
+  host: {
+    '[class.ant-form-item-label]': 'true'
+  }
 })
-export class NzFormLabelDirective {
-  @HostBinding(`class.ant-form-item-label`) _nzFormItemLabel = true;
-}
+export class NzFormLabelDirective { }
diff --git a/src/components/form/nz-form-split.directive.ts b/src/components/form/nz-form-split.directive.ts
index 9ea3c50635f..6091e6a0afe 100644
--- a/src/components/form/nz-form-split.directive.ts
+++ b/src/components/form/nz-form-split.directive.ts
@@ -1,8 +1,9 @@
 import { Directive, HostBinding } from '@angular/core';
 
 @Directive({
-  selector: '[nz-form-split]'
+  selector: '[nz-form-split]',
+  host: {
+    '[class.ant-form-split]': 'true'
+  }
 })
-export class NzFormSplitDirective {
-  @HostBinding(`class.ant-form-split`) _nzFormSplit = true;
-}
+export class NzFormSplitDirective { }
diff --git a/src/components/form/nz-form-text.directive.ts b/src/components/form/nz-form-text.directive.ts
index 01348a303eb..ddca39d42b3 100644
--- a/src/components/form/nz-form-text.directive.ts
+++ b/src/components/form/nz-form-text.directive.ts
@@ -1,8 +1,9 @@
 import { Directive, HostBinding } from '@angular/core';
 
 @Directive({
-  selector: '[nz-form-text]'
+  selector: '[nz-form-text]',
+  host: {
+    '[class.ant-form-text]': 'true'
+  }
 })
-export class NzFormTextDirective {
-  @HostBinding(`class.ant-form-text`) _nzFormText = true;
-}
+export class NzFormTextDirective { }
diff --git a/src/components/input/nz-input.directive.component.ts b/src/components/input/nz-input.directive.component.ts
index 5b88c872d8d..19a15a4d558 100644
--- a/src/components/input/nz-input.directive.component.ts
+++ b/src/components/input/nz-input.directive.component.ts
@@ -15,7 +15,10 @@ import { toBoolean } from '../util/convert';
   template     : ``,
   styleUrls    : [
     './style/index.less'
-  ]
+  ],
+  host: {
+    '[class.ant-input]': 'true'
+  }
 })
 export class NzInputDirectiveComponent {
   private _disabled = false;
@@ -84,9 +87,6 @@ export class NzInputDirectiveComponent {
     return this._autosize;
   }
 
-  @HostBinding(`class.ant-input`) _nzInput = true;
-
-
   @HostBinding(`class.ant-input-lg`)
   get setLgClass(): boolean {
     return this.size === 'lg';
diff --git a/src/components/layout/nz-content.component.ts b/src/components/layout/nz-content.component.ts
index c1ab410d696..ce198f25c93 100644
--- a/src/components/layout/nz-content.component.ts
+++ b/src/components/layout/nz-content.component.ts
@@ -5,8 +5,9 @@ import { Component, HostBinding, ViewEncapsulation } from '@angular/core';
   encapsulation: ViewEncapsulation.None,
   template     : `
     <ng-content></ng-content>
-  `
+  `,
+  host: {
+    '[class.ant-layout-content]': 'true'
+  }
 })
-export class NzContentComponent {
-  @HostBinding('class.ant-layout-content') _nzLayoutContent = true;
-}
+export class NzContentComponent { }
diff --git a/src/components/layout/nz-footer.component.ts b/src/components/layout/nz-footer.component.ts
index ce74772b749..706c1f7a643 100644
--- a/src/components/layout/nz-footer.component.ts
+++ b/src/components/layout/nz-footer.component.ts
@@ -5,8 +5,9 @@ import { Component, HostBinding, ViewEncapsulation } from '@angular/core';
   encapsulation: ViewEncapsulation.None,
   template     : `
     <ng-content></ng-content>
-  `
+  `,
+  host: {
+    '[class.ant-layout-footer]': 'true'
+  }
 })
-export class NzFooterComponent {
-  @HostBinding('class.ant-layout-footer') _nzLayoutFooter = true;
-}
+export class NzFooterComponent { }
diff --git a/src/components/layout/nz-header.component.ts b/src/components/layout/nz-header.component.ts
index 2139a503c70..b285b02682a 100644
--- a/src/components/layout/nz-header.component.ts
+++ b/src/components/layout/nz-header.component.ts
@@ -4,8 +4,9 @@ import { Component, HostBinding } from '@angular/core';
   selector     : 'nz-header',
   template     : `
     <ng-content></ng-content>
-  `
+  `,
+  host: {
+    '[class.ant-layout-header]': 'true'
+  }
 })
-export class NzHeaderComponent {
-  @HostBinding('class.ant-layout-header') _nzLayoutHeader = true;
-}
+export class NzHeaderComponent { }
diff --git a/src/components/layout/nz-layout.component.ts b/src/components/layout/nz-layout.component.ts
index a498d278cb1..a2f1dbcc05e 100644
--- a/src/components/layout/nz-layout.component.ts
+++ b/src/components/layout/nz-layout.component.ts
@@ -9,10 +9,11 @@ import { Component, HostBinding, ViewEncapsulation } from '@angular/core';
   styleUrls    : [
     './style/index.less',
     './style/patch.less'
-  ]
+  ],
+  host: {
+    '[class.ant-layout]': 'true'
+  }
 })
 export class NzLayoutComponent {
   @HostBinding('class.ant-layout-has-sider') hasSider = false;
-
-  @HostBinding('class.ant-layout') _nzLayout = true;
 }
diff --git a/src/components/layout/nz-sider.component.ts b/src/components/layout/nz-sider.component.ts
index ad35d6e5c06..e4bf02efea5 100644
--- a/src/components/layout/nz-sider.component.ts
+++ b/src/components/layout/nz-sider.component.ts
@@ -25,7 +25,10 @@ export type NzBreakPoinit = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     <div class="ant-layout-sider-trigger" *ngIf="_isSiderTrgger" (click)="toggleCollapse()">
       <i class="anticon" [class.anticon-left]="!nzCollapsed" [class.anticon-right]="nzCollapsed"></i>
     </div>
-  `
+  `,
+  host: {
+    '[class.ant-layout-sider]': 'true'
+  }
 })
 export class NzSiderComponent {
   private _collapsed = false;
@@ -73,7 +76,6 @@ export class NzSiderComponent {
   }
 
   @Output() nzCollapsedChange = new EventEmitter();
-  @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
index 814e91f4038..a5dea27a884 100644
--- a/src/components/menu/nz-menu-divider.component.ts
+++ b/src/components/menu/nz-menu-divider.component.ts
@@ -3,8 +3,10 @@ import { Component, HostBinding } from '@angular/core';
 @Component({
   selector     : '[nz-menu-divider]',
   template     : `
-    <ng-content></ng-content>`,
+    <ng-content></ng-content>
+  `,
+  host: {
+    '[class.ant-dropdown-menu-item-divider]': 'true'
+  }
 })
-export class NzMenuDividerComponent {
-  @HostBinding('class.ant-dropdown-menu-item-divider') _nzDropdownMenuItemDivider = true;
-}
+export class NzMenuDividerComponent { }
diff --git a/src/components/menu/nz-menu-group.component.ts b/src/components/menu/nz-menu-group.component.ts
index 9bb3e85a241..e4d044520ed 100644
--- a/src/components/menu/nz-menu-group.component.ts
+++ b/src/components/menu/nz-menu-group.component.ts
@@ -10,8 +10,10 @@ import {
     </div>
     <ul class="ant-menu-item-group-list">
       <ng-content></ng-content>
-    </ul>`,
+    </ul>
+  `,
+  host: {
+    '[class.ant-menu-item-group]': 'true'
+  }
 })
-export class NzMenuGroupComponent {
-  @HostBinding('class.ant-menu-item-group') _nzMenuItemGroup = true;
-}
+export class NzMenuGroupComponent { }
diff --git a/src/components/table/nz-row-expand-icon.component.ts b/src/components/table/nz-row-expand-icon.component.ts
index 712b29b6651..8185bddb4ae 100644
--- a/src/components/table/nz-row-expand-icon.component.ts
+++ b/src/components/table/nz-row-expand-icon.component.ts
@@ -10,7 +10,10 @@ import { toBoolean } from '../util/convert';
 
 @Component({
   selector: 'nz-row-expand-icon',
-  template: ``
+  template: ``,
+  host: {
+    '[class.ant-table-row-expand-icon]': 'true'
+  }
 })
 export class NzRowExpandIconComponent {
   private _expand = false;
@@ -51,9 +54,6 @@ export class NzRowExpandIconComponent {
     return this.nzShowExpand && !this.nzExpand;
   }
 
-  @HostBinding(`class.ant-table-row-expand-icon`) _expandIcon = true;
-
-
   @HostListener('click')
   onClick() {
     this.nzExpand = !this.nzExpand;
diff --git a/src/components/table/nz-row-indent.component.ts b/src/components/table/nz-row-indent.component.ts
index e5fafa868a5..41058a85edc 100644
--- a/src/components/table/nz-row-indent.component.ts
+++ b/src/components/table/nz-row-indent.component.ts
@@ -6,7 +6,10 @@ import {
 
 @Component({
   selector: 'nz-row-indent',
-  template: ``
+  template: ``,
+  host: {
+    '[class.ant-table-row-indent]': 'true'
+  }
 })
 export class NzRowIndentComponent {
   @Input() nzIndentSize;
@@ -16,8 +19,6 @@ export class NzRowIndentComponent {
     return this.nzIndentSize * 20;
   }
 
-  @HostBinding(`class.ant-table-row-indent`) _rowIndent = true;
-
   constructor() {
   }
 }
diff --git a/src/components/table/nz-table-divider.directive.ts b/src/components/table/nz-table-divider.directive.ts
index 3d18498c902..f11f053b475 100644
--- a/src/components/table/nz-table-divider.directive.ts
+++ b/src/components/table/nz-table-divider.directive.ts
@@ -1,8 +1,9 @@
 import { Directive, HostBinding } from '@angular/core';
 
 @Directive({
-  selector: '[nz-table-divider]'
+  selector: '[nz-table-divider]',
+  host: {
+    '[class.ant-divider]': 'true'
+  }
 })
-export class NzTableDividerDirective {
-  @HostBinding(`class.ant-divider`) _nzDivider = true;
-}
+export class NzTableDividerDirective { }
diff --git a/src/components/table/nz-table-filter.component.ts b/src/components/table/nz-table-filter.component.ts
index 11c6691e993..52f379665e9 100644
--- a/src/components/table/nz-table-filter.component.ts
+++ b/src/components/table/nz-table-filter.component.ts
@@ -13,11 +13,12 @@ import { NzDropDownComponent } from '../dropdown/nz-dropdown.component';
     <a class="ant-table-filter-dropdown-link clear" (click)="hideDropDown()">
       <ng-content select="[nz-table-filter-clear]"></ng-content>
     </a>
-  `
+  `,
+  host: {
+    '[class.ant-table-filter-dropdown-btns]': 'true'
+  }
 })
 export class NzTableFilterComponent implements OnInit {
-  @HostBinding('class.ant-table-filter-dropdown-btns') _dropDownButton = true;
-
   hideDropDown() {
     this.nzDropDownComponent.nzVisible = false;
     this.nzDropDownComponent._hide();
diff --git a/src/components/table/nz-tbody-tr.directive.ts b/src/components/table/nz-tbody-tr.directive.ts
index 8b2b81a7276..467506d1f6e 100644
--- a/src/components/table/nz-tbody-tr.directive.ts
+++ b/src/components/table/nz-tbody-tr.directive.ts
@@ -1,9 +1,10 @@
 import { Directive, HostBinding, Input } from '@angular/core';
 
 @Directive({
-  selector: '[nz-tbody-tr]'
+  selector: '[nz-tbody-tr]',
+  host: {
+    '[class.ant-table-row]': 'true'
+  }
 })
 
-export class NzTbodyTrDirective {
-  @HostBinding(`class.ant-table-row`) _nzTableRow = true;
-}
+export class NzTbodyTrDirective { }
diff --git a/src/components/table/nz-tbody.directive.ts b/src/components/table/nz-tbody.directive.ts
index 4c1116594f6..50079de5f8b 100644
--- a/src/components/table/nz-tbody.directive.ts
+++ b/src/components/table/nz-tbody.directive.ts
@@ -1,9 +1,10 @@
 import { Directive, HostBinding } from '@angular/core';
 
 @Directive({
-  selector: '[nz-tbody]'
+  selector: '[nz-tbody]',
+  host: {
+    '[class.ant-table-tbody]': 'true'
+  }
 })
 
-export class NzTbodyDirective {
-  @HostBinding(`class.ant-table-tbody`) _nzTableTbody = true;
-}
+export class NzTbodyDirective { }
diff --git a/src/components/table/nz-thead.directive.ts b/src/components/table/nz-thead.directive.ts
index 7a6679f7254..9285ffa764d 100644
--- a/src/components/table/nz-thead.directive.ts
+++ b/src/components/table/nz-thead.directive.ts
@@ -1,8 +1,9 @@
 import { Directive, HostBinding } from '@angular/core';
 
 @Directive({
-  selector: '[nz-thead]'
+  selector: '[nz-thead]',
+  host: {
+    '[class.ant-table-thead]': 'true'
+  }
 })
-export class NzTheadDirective {
-  @HostBinding(`class.ant-table-thead`) _nzTableThead = true;
-}
+export class NzTheadDirective { }
diff --git a/src/components/tabs/nz-tab-label.directive.ts b/src/components/tabs/nz-tab-label.directive.ts
index c4067f4e154..d8c544bdd55 100644
--- a/src/components/tabs/nz-tab-label.directive.ts
+++ b/src/components/tabs/nz-tab-label.directive.ts
@@ -2,12 +2,14 @@ import { Directive, ElementRef, HostBinding, Input } from '@angular/core';
 import { toBoolean } from '../util/convert';
 
 @Directive({
-  selector: '[nz-tab-label]'
+  selector: '[nz-tab-label]',
+  host: {
+    '[class.ant-tabs-tab]': 'true'
+  }
 })
 export class NzTabLabelDirective {
-  private _disabled = false;
 
-  @HostBinding('class.ant-tabs-tab') _nzTabsTab = true;
+  private _disabled = false;
 
   @Input()
   @HostBinding('class.ant-tabs-tab-disabled')
diff --git a/src/components/tabs/nz-tab.component.ts b/src/components/tabs/nz-tab.component.ts
index 66763b2add1..99fa3501f62 100644
--- a/src/components/tabs/nz-tab.component.ts
+++ b/src/components/tabs/nz-tab.component.ts
@@ -18,7 +18,10 @@ import { toBoolean } from '../util/convert';
       <ng-content></ng-content>
     </ng-template>
   `,
-  styles  : []
+  styles  : [],
+  host: {
+    '[class.ant-tabs-tabpane]': 'true'
+  }
 })
 export class NzTabComponent implements OnDestroy, OnInit {
   private disabled = false;
@@ -39,7 +42,6 @@ export class NzTabComponent implements OnDestroy, OnInit {
   @Output() nzClick = new EventEmitter();
   @Output() nzDeselect = new EventEmitter();
   @ContentChild('nzTabHeading') _tabHeading: TemplateRef<any>;
-  @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
index 2a94f66bee4..f62891aa3e4 100755
--- a/src/components/tabs/nz-tabs-ink-bar.directive.ts
+++ b/src/components/tabs/nz-tabs-ink-bar.directive.ts
@@ -6,12 +6,13 @@ export type NzTabPositionMode = 'horizontal' | 'vertical';
 
 @Directive({
   selector: '[nz-tabs-ink-bar]',
+  host: {
+    '[class.ant-tabs-ink-bar]': 'true'
+  }
 })
 export class NzTabsInkBarDirective {
   private _animated = false;
 
-  @HostBinding('class.ant-tabs-ink-bar') _nzTabsInkBar = true;
-
   @Input()
   @HostBinding('class.ant-tabs-ink-bar-animated')
   set nzAnimated(value: boolean) {
diff --git a/src/components/tabs/nz-tabs-nav.component.ts b/src/components/tabs/nz-tabs-nav.component.ts
index 446904201c6..3e978bd594d 100644
--- a/src/components/tabs/nz-tabs-nav.component.ts
+++ b/src/components/tabs/nz-tabs-nav.component.ts
@@ -58,7 +58,11 @@ export type NzTabPositionMode = 'horizontal' | 'vertical';
           </div>
         </div>
       </div>
-    </div>`
+    </div>
+  `,
+  host: {
+    '[class.ant-tabs-bar]': 'true'
+  }
 })
 export class NzTabsNavComponent implements AfterContentChecked, AfterContentInit {
   private _animated = true;
@@ -115,7 +119,6 @@ export class NzTabsNavComponent implements AfterContentChecked, AfterContentInit
   @ViewChild(NzTabsInkBarDirective) _inkBar: NzTabsInkBarDirective;
   @ViewChild('tabListContainer') _tabListContainer: ElementRef;
   @ViewChild('tabList') _tabList: ElementRef;
-  @HostBinding('class.ant-tabs-bar') _nzTabsBar = true;
 
   @Input()
   set nzShowPagination(value: boolean) {
diff --git a/tslint.json b/tslint.json
index a0c8d03f93c..0383d79bac7 100644
--- a/tslint.json
+++ b/tslint.json
@@ -129,7 +129,7 @@
     ],
     "use-input-property-decorator": true,
     "use-output-property-decorator": true,
-    "use-host-property-decorator": true,
+    "use-host-property-decorator": false,
     "no-input-rename": true,
     "no-output-rename": true,
     "use-life-cycle-interface": true,