refactor(module:all): remove property for static host className

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')

src/components/badge/nz-badge.component.ts

@@ -57,7 +57,10 @@ import {
   styleUrls    : [
     './style/index.less',
     './style/patch.less'
-  ]
+  ],
+  host: {
+    '[class.ant-badge]': 'true'
+  }
 })
 export class NzBadgeComponent implements OnInit {
   _showZero = false;
@@ -66,7 +69,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() {

src/components/breadcrumb/nz-breadcrumb.component.ts

@@ -13,11 +13,13 @@ import {
   styleUrls    : [
     './style/index.less',
     './style/patch.less'
-  ]
+  ],
+  host: {
+    '[class.ant-breadcrumb]': 'true'
+  }
 })
 export class NzBreadCrumbComponent {
   @Input() nzSeparator = '/';
-  @HostBinding('class.ant-breadcrumb') _nzBreadcrumb = true;
 
   constructor() {
   }

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 { }

src/components/card/nz-card.component.ts

@@ -48,7 +48,10 @@ import {
   styleUrls    : [
     './style/index.less',
     './style/patch.less'
-  ]
+  ],
+  host: {
+    '[class.ant-card]': 'true'
+  }
 })
 export class NzCardComponent {
   @Input() @HostBinding('class.ant-card-bordered') nzBordered = true;
@@ -57,5 +60,4 @@ export class NzCardComponent {
   @ContentChild('title') title: TemplateRef<any>;
   @ContentChild('extra') extra: TemplateRef<any>;
   @ContentChild('body') body: TemplateRef<any>;
-  @HostBinding('class.ant-card') _nzCard = true;
 }

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,9 +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;

src/components/carousel/nz-carousel.component.ts

@@ -31,7 +31,10 @@ import { NzCarouselContentDirective } from './nz-carousel-content.directive';
   styleUrls    : [
     './style/index.less',
     './style/patch.less'
-  ]
+  ],
+  host: {
+    '[class.ant-carousel]': 'true'
+  }
 })
 export class NzCarouselComponent implements AfterViewInit, OnDestroy {
   activeIndex = 0;
@@ -51,7 +54,6 @@ export class NzCarouselComponent implements AfterViewInit, OnDestroy {
   @Input() nzDots = true;
   @Input() nzEffect = 'scrollx';
   @Input() @HostBinding('class.ant-carousel-vertical') nzVertical = false;
-  @HostBinding('class.ant-carousel') _nzCarousel = true;
 
   constructor(public hostElement: ElementRef, private _renderer: Renderer2) {
   }

src/components/collapse/nz-collapse.component.ts

@@ -44,15 +44,16 @@ import { NzCollapsesetComponent } from './nz-collapseset.component'
       transition('inactive => active', animate('150ms ease-in')),
       transition('active => inactive', animate('150ms ease-out'))
     ])
-  ]
+  ],
+  host: {
+    '[class.ant-collapse-item]': 'true'
+  }
 })
 
 export class NzCollapseComponent {
   _el;
   _active: boolean;
 
-  @HostBinding('class.ant-collapse-item') _nzCollapseItem = true;
-
   @Input() nzTitle: string;
   @Input()
   @HostBinding('class.ant-collapse-item-disabled')

src/components/datepicker/nz-datepicker.component.ts

@@ -180,7 +180,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 {
   _el: HTMLElement;
@@ -211,7 +214,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()
   get nzDisabled(): boolean {

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) {
   }
 }

src/components/form/nz-form-control.component.ts

@@ -12,12 +12,14 @@ import { Component, HostBinding, Input } from '@angular/core';
       <ng-content></ng-content>
     </div>
   `,
-  styles  : []
+  styles  : [],
+  host: {
+    '[class.ant-form-item-control-wrapper]': 'true'
+  }
 })
 
 export class NzFormControlComponent {
   _hasFeedback = false;
-  @HostBinding(`class.ant-form-item-control-wrapper`) _nzFormItemControlWrapper = true;
 
   @Input()
   set nzHasFeedback(value: boolean|string) {

src/components/form/nz-form-explain.directive.ts

@@ -7,12 +7,13 @@ 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) {
   }
 

src/components/form/nz-form-extra.directive.ts

@@ -1,9 +1,10 @@
 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 { }

src/components/form/nz-form-item.directive.ts

@@ -1,14 +1,15 @@
 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++;
   };

src/components/form/nz-form-label.directive.ts

@@ -1,9 +1,10 @@
 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 { }

src/components/form/nz-form-split.directive.ts

@@ -1,9 +1,10 @@
 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 { }

src/components/form/nz-form-text.directive.ts

@@ -1,9 +1,10 @@
 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 { }

src/components/input/nz-input.directive.component.ts

@@ -14,7 +14,10 @@ import { AutoSizeType } from './nz-input.component';
   template     : ``,
   styleUrls    : [
     './style/index.less'
-  ]
+  ],
+  host: {
+    '[class.ant-input]': 'true'
+  }
 })
 export class NzInputDirectiveComponent {
   size = 'default';
@@ -79,9 +82,6 @@ export class NzInputDirectiveComponent {
     }
   }
 
-  @HostBinding(`class.ant-input`) _nzInput = true;
-
-
   @HostBinding(`class.ant-input-lg`)
   get setLgClass(): boolean {
     return this.size === 'lg';

src/components/layout/nz-content.component.ts

@@ -5,9 +5,10 @@ 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 { }

src/components/layout/nz-footer.component.ts

@@ -5,9 +5,10 @@ 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 { }

src/components/layout/nz-header.component.ts

@@ -4,9 +4,10 @@ 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 { }

src/components/layout/nz-layout.component.ts

@@ -9,11 +9,12 @@ 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;
 }

src/components/layout/nz-sider.component.ts

@@ -24,7 +24,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 {
@@ -57,7 +60,6 @@ export class NzSiderComponent {
   }
 
   @Output() nzCollapsedChange = new EventEmitter();
-  @HostBinding('class.ant-layout-sider') _nzLayoutSider = true;
 
   @HostBinding('class.ant-layout-sider-zero-width')
   get setZeroClass() {