diff --git a/components/alert/nz-alert.component.html b/components/alert/nz-alert.component.html
index cfb3a2c88a1..4a242860ae4 100644
--- a/components/alert/nz-alert.component.html
+++ b/components/alert/nz-alert.component.html
@@ -1,4 +1,14 @@
-<div [ngClass]="outerClassMap" *ngIf="display" [@fadeAnimation] (@fadeAnimation.done)="onFadeAnimationDone()">
+<div *ngIf="display"
+  class="ant-alert"
+  [class.ant-alert-success]="nzType === 'success'"
+  [class.ant-alert-info]="nzType === 'info'"
+  [class.ant-alert-warning]="nzType === 'warning'"
+  [class.ant-alert-error]="nzType === 'error'"
+  [class.ant-alert-no-icon]="!nzShowIcon"
+  [class.ant-alert-banner]="nzBanner"
+  [class.ant-alert-with-description]="!!nzDescription"
+  [@fadeAnimation]
+  (@fadeAnimation.done)="onFadeAnimationDone()">
   <ng-container *ngIf="nzShowIcon">
     <i class="ant-alert-icon" [ngClass]="nzIconType" *ngIf="nzIconType; else iconTemplate"></i>
     <ng-template #iconTemplate>
@@ -6,16 +16,10 @@
     </ng-template>
   </ng-container>
   <span class="ant-alert-message" *ngIf="nzMessage">
-    <ng-container *ngIf="isMessageString; else messageTemplate">{{ nzMessage }}</ng-container>
-    <ng-template #messageTemplate>
-      <ng-template [ngTemplateOutlet]="nzMessage"></ng-template>
-    </ng-template>
+    <ng-container *nzStringTemplateOutlet="nzMessage">{{ nzMessage }}</ng-container>
   </span>
   <span class="ant-alert-description" *ngIf="nzDescription">
-    <ng-container *ngIf="isDescriptionString; else descriptionTemplate">{{ nzDescription }}</ng-container>
-    <ng-template #descriptionTemplate>
-      <ng-template [ngTemplateOutlet]="nzDescription"></ng-template>
-    </ng-template>
+    <ng-container *nzStringTemplateOutlet="nzDescription">{{ nzDescription }}</ng-container>
   </span>
   <a *ngIf="nzCloseable || nzCloseText"
     class="ant-alert-close-icon"
@@ -24,10 +28,7 @@
       <i nz-icon type="close" class="anticon-close"></i>
     </ng-template>
     <ng-container *ngIf="nzCloseText; else closeDefaultTemplate">
-      <ng-container *ngIf="isCloseTextString; else closeTextTemplate">{{ nzCloseText }}</ng-container>
-      <ng-template #closeTextTemplate>
-        <ng-template [ngTemplateOutlet]="nzCloseText"></ng-template>
-      </ng-template>
+      <ng-container *nzStringTemplateOutlet="nzCloseText">{{ nzCloseText }}</ng-container>
     </ng-container>
   </a>
 </div>
\ No newline at end of file
diff --git a/components/alert/nz-alert.component.ts b/components/alert/nz-alert.component.ts
index 7f75d4bc37c..5c98242948e 100644
--- a/components/alert/nz-alert.component.ts
+++ b/components/alert/nz-alert.component.ts
@@ -3,14 +3,15 @@ import {
   Component,
   EventEmitter,
   Input,
-  OnInit,
+  OnChanges,
   Output,
+  SimpleChanges,
   TemplateRef,
   ViewEncapsulation
 } from '@angular/core';
 import { fadeAnimation } from '../core/animation/fade-animations';
 import { NgClassType } from '../core/types/ng-class';
-import { toBoolean } from '../core/util/convert';
+import { InputBoolean } from '../core/util/convert';
 
 @Component({
   selector           : 'nz-alert',
@@ -25,108 +26,21 @@ import { toBoolean } from '../core/util/convert';
     }`
   ]
 })
-export class NzAlertComponent implements OnInit {
+export class NzAlertComponent implements OnChanges {
   display = true;
   isTypeSet = false;
   isShowIconSet = false;
-  prefixClass = 'ant-alert';
-  isDescriptionString: boolean;
-  isMessageString: boolean;
-  isCloseTextString: boolean;
-  outerClassMap: NgClassType;
-  iconType: string;
-  iconTheme: string;
-  @Output()
-  readonly nzOnClose: EventEmitter<boolean> = new EventEmitter();
-  @Input()
-  nzIconType: NgClassType;
-  private _banner = false;
-  private _closeable = false;
-  private _showIcon = false;
-  private _type = 'info';
-  private _description: string | TemplateRef<void>;
-  private _message: string | TemplateRef<void>;
-  private _closeText: string | TemplateRef<void>;
-
-  @Input()
-  set nzDescription(value: string | TemplateRef<void>) {
-    this.isDescriptionString = !(value instanceof TemplateRef);
-    this._description = value;
-    this.updateOuterClassMap();
-    this.updateIconClassMap();
-  }
-
-  get nzDescription(): string | TemplateRef<void> {
-    return this._description;
-  }
-
-  @Input()
-  set nzCloseText(value: string | TemplateRef<void>) {
-    this.isCloseTextString = !(value instanceof TemplateRef);
-    this._closeText = value;
-  }
-
-  get nzCloseText(): string | TemplateRef<void> {
-    return this._closeText;
-  }
-
-  @Input()
-  set nzMessage(value: string | TemplateRef<void>) {
-    this.isMessageString = !(value instanceof TemplateRef);
-    this._message = value;
-  }
-
-  get nzMessage(): string | TemplateRef<void> {
-    return this._message;
-  }
-
-  @Input()
-  set nzType(value: string) {
-    this._type = value;
-    this.isTypeSet = true;
-    this.updateOuterClassMap();
-    this.updateIconClassMap();
-  }
-
-  get nzType(): string {
-    return this._type;
-  }
-
-  @Input()
-  set nzBanner(value: boolean) {
-    this._banner = toBoolean(value);
-    if (!this.isTypeSet) {
-      this.nzType = 'warning';
-    }
-    if (!this.isShowIconSet) {
-      this.nzShowIcon = true;
-    }
-    this.updateOuterClassMap();
-  }
-
-  get nzBanner(): boolean {
-    return this._banner;
-  }
-
-  @Input()
-  set nzCloseable(value: boolean) {
-    this._closeable = toBoolean(value);
-  }
-
-  get nzCloseable(): boolean {
-    return this._closeable;
-  }
-
-  @Input()
-  set nzShowIcon(value: boolean) {
-    this._showIcon = toBoolean(value);
-    this.isShowIconSet = true;
-    this.updateOuterClassMap();
-  }
-
-  get nzShowIcon(): boolean {
-    return this._showIcon;
-  }
+  iconType = 'info-circle';
+  iconTheme = 'fill';
+  @Output() readonly nzOnClose: EventEmitter<boolean> = new EventEmitter();
+  @Input() @InputBoolean() nzCloseable = false;
+  @Input() @InputBoolean() nzShowIcon = false;
+  @Input() @InputBoolean() nzBanner = false;
+  @Input() nzCloseText: string | TemplateRef<void>;
+  @Input() nzIconType: NgClassType;
+  @Input() nzMessage: string | TemplateRef<void>;
+  @Input() nzDescription: string | TemplateRef<void>;
+  @Input() nzType = 'info';
 
   closeAlert(): void {
     this.display = false;
@@ -138,16 +52,6 @@ export class NzAlertComponent implements OnInit {
     }
   }
 
-  updateOuterClassMap(): void {
-    this.outerClassMap = {
-      [ `${this.prefixClass}` ]                 : true,
-      [ `${this.prefixClass}-${this.nzType}` ]  : true,
-      [ `${this.prefixClass}-no-icon` ]         : !this.nzShowIcon,
-      [ `${this.prefixClass}-banner` ]          : this.nzBanner,
-      [ `${this.prefixClass}-with-description` ]: !!this.nzDescription
-    };
-  }
-
   updateIconClassMap(): void {
     switch (this.nzType) {
       case 'error':
@@ -170,8 +74,23 @@ export class NzAlertComponent implements OnInit {
     }
   }
 
-  ngOnInit(): void {
-    this.updateIconClassMap();
-    this.updateOuterClassMap();
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.nzShowIcon) {
+      this.isShowIconSet = true;
+    }
+    if (changes.nzDescription || changes.nzType) {
+      this.updateIconClassMap();
+    }
+    if (changes.nzType) {
+      this.isTypeSet = true;
+    }
+    if (changes.nzBanner) {
+      if (!this.isTypeSet) {
+        this.nzType = 'warning';
+      }
+      if (!this.isShowIconSet) {
+        this.nzShowIcon = true;
+      }
+    }
   }
 }
diff --git a/components/alert/nz-alert.module.ts b/components/alert/nz-alert.module.ts
index 652660179e1..02473ff60ae 100644
--- a/components/alert/nz-alert.module.ts
+++ b/components/alert/nz-alert.module.ts
@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { NzAddOnModule } from '../core/addon/addon.module';
 import { NzIconModule } from '../icon/nz-icon.module';
 
 import { NzAlertComponent } from './nz-alert.component';
@@ -7,7 +8,7 @@ import { NzAlertComponent } from './nz-alert.component';
 @NgModule({
   declarations: [ NzAlertComponent ],
   exports     : [ NzAlertComponent ],
-  imports     : [ CommonModule, NzIconModule ]
+  imports     : [ CommonModule, NzIconModule, NzAddOnModule ]
 })
 export class NzAlertModule {
 }
diff --git a/components/card/nz-card-meta.component.html b/components/card/nz-card-meta.component.html
index b07d8e6452a..976cfb24454 100755
--- a/components/card/nz-card-meta.component.html
+++ b/components/card/nz-card-meta.component.html
@@ -3,15 +3,9 @@
 </div>
 <div class="ant-card-meta-detail" *ngIf="nzTitle || nzDescription">
   <div class="ant-card-meta-title" *ngIf="nzTitle">
-    <ng-container *ngIf="isTitleString; else titleTemplate">{{ nzTitle }}</ng-container>
-    <ng-template #titleTemplate>
-      <ng-template [ngTemplateOutlet]="nzTitle"></ng-template>
-    </ng-template>
+    <ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
   </div>
   <div class="ant-card-meta-description" *ngIf="nzDescription">
-    <ng-container *ngIf="isDescriptionString; else descriptionTemplate">{{ nzDescription }}</ng-container>
-    <ng-template #descriptionTemplate>
-      <ng-template [ngTemplateOutlet]="nzDescription"></ng-template>
-    </ng-template>
+    <ng-container *nzStringTemplateOutlet="nzDescription">{{ nzDescription }}</ng-container>
   </div>
 </div>
\ No newline at end of file
diff --git a/components/card/nz-card-meta.component.ts b/components/card/nz-card-meta.component.ts
index 4f3a9c3b77b..7d9aadfceaf 100755
--- a/components/card/nz-card-meta.component.ts
+++ b/components/card/nz-card-meta.component.ts
@@ -16,30 +16,7 @@ import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulati
   }
 })
 export class NzCardMetaComponent {
-  isDescriptionString: boolean;
-  isTitleString: boolean;
-
-  @Input()
-  set nzTitle(value: string | TemplateRef<void>) {
-    this.isTitleString = !(value instanceof TemplateRef);
-    this._title = value;
-  }
-
-  get nzTitle(): string | TemplateRef<void> {
-    return this._title;
-  }
-
-  @Input()
-  set nzDescription(value: string | TemplateRef<void>) {
-    this.isDescriptionString = !(value instanceof TemplateRef);
-    this._description = value;
-  }
-
-  get nzDescription(): string | TemplateRef<void> {
-    return this._description;
-  }
-
+  @Input() nzTitle: string | TemplateRef<void>;
+  @Input() nzDescription: string | TemplateRef<void>;
   @Input() nzAvatar: TemplateRef<void>;
-  private _title: string | TemplateRef<void>;
-  private _description: string | TemplateRef<void>;
 }
diff --git a/components/card/nz-card.component.html b/components/card/nz-card.component.html
index 642416b5382..63f5e327d5d 100755
--- a/components/card/nz-card.component.html
+++ b/components/card/nz-card.component.html
@@ -1,16 +1,10 @@
-<ng-template #titleTemplate>
-  <ng-template [ngTemplateOutlet]="nzTitle"></ng-template>
-</ng-template>
-<ng-template #extraTemplate>
-  <ng-template [ngTemplateOutlet]="nzExtra"></ng-template>
-</ng-template>
-<div class="ant-card-head" *ngIf="nzTitle||nzExtra||tab">
+<div class="ant-card-head" *ngIf="nzTitle || nzExtra || tab">
   <div class="ant-card-head-wrapper">
     <div class="ant-card-head-title" *ngIf="nzTitle">
-      <ng-container *ngIf="isTitleString; else titleTemplate">{{ nzTitle }}</ng-container>
+      <ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
     </div>
     <div class="ant-card-extra" *ngIf="nzExtra">
-      <ng-container *ngIf="isExtraString; else extraTemplate">{{ nzExtra }}</ng-container>
+      <ng-container *nzStringTemplateOutlet="nzExtra">{{ nzExtra }}</ng-container>
     </div>
   </div>
   <ng-container *ngIf="tab">
diff --git a/components/card/nz-card.component.ts b/components/card/nz-card.component.ts
index 00e93bfb149..b7081a0aa13 100755
--- a/components/card/nz-card.component.ts
+++ b/components/card/nz-card.component.ts
@@ -2,7 +2,6 @@ import {
   ChangeDetectionStrategy,
   Component,
   ContentChild,
-  HostBinding,
   Input,
   TemplateRef,
   ViewEncapsulation
@@ -22,52 +21,23 @@ import { NzCardTabComponent } from './nz-card-tab.component';
     }
   ` ],
   host               : {
-    '[class.ant-card]'        : 'true',
-    '[class.ant-card-loading]': 'nzLoading'
+    '[class.ant-card]'             : 'true',
+    '[class.ant-card-loading]'     : 'nzLoading',
+    '[class.ant-card-bordered]'    : 'nzBordered',
+    '[class.ant-card-hoverable]'   : 'nzHoverable',
+    '[class.ant-card-type-inner]'  : `nzType === 'inner'`,
+    '[class.ant-card-contain-tabs]': '!!tab'
   }
 })
 export class NzCardComponent {
-  @Input() @InputBoolean() @HostBinding('class.ant-card-bordered') nzBordered = true;
+  @Input() @InputBoolean() nzBordered = true;
   @Input() @InputBoolean() nzLoading = false;
-  @Input() @InputBoolean() @HostBinding('class.ant-card-hoverable') nzHoverable = false;
+  @Input() @InputBoolean() nzHoverable = false;
   @Input() nzBodyStyle: { [ key: string ]: string };
   @Input() nzCover: TemplateRef<void>;
   @Input() nzActions: Array<TemplateRef<void>> = [];
   @Input() nzType: string;
+  @Input() nzTitle: string | TemplateRef<void>;
+  @Input() nzExtra: string | TemplateRef<void>;
   @ContentChild(NzCardTabComponent) tab: NzCardTabComponent;
-  isTitleString: boolean;
-  isExtraString: boolean;
-
-  @Input()
-  set nzTitle(value: string | TemplateRef<void>) {
-    this.isTitleString = !(value instanceof TemplateRef);
-    this._title = value;
-  }
-
-  get nzTitle(): string | TemplateRef<void> {
-    return this._title;
-  }
-
-  @Input()
-  set nzExtra(value: string | TemplateRef<void>) {
-    this.isExtraString = !(value instanceof TemplateRef);
-    this._extra = value;
-  }
-
-  get nzExtra(): string | TemplateRef<void> {
-    return this._extra;
-  }
-
-  @HostBinding('class.ant-card-type-inner')
-  get isInner(): boolean {
-    return this.nzType === 'inner';
-  }
-
-  @HostBinding('class.ant-card-contain-tabs')
-  get isTabs(): boolean {
-    return !!this.tab;
-  }
-
-  private _title: string | TemplateRef<void>;
-  private _extra: string | TemplateRef<void>;
 }
diff --git a/components/card/nz-card.module.ts b/components/card/nz-card.module.ts
index ecf3b6cec9a..5fccd37ee19 100644
--- a/components/card/nz-card.module.ts
+++ b/components/card/nz-card.module.ts
@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { NzAddOnModule } from '../core/addon/addon.module';
 
 import { NzCardGridDirective } from './nz-card-grid.directive';
 import { NzCardLoadingComponent } from './nz-card-loading.component';
@@ -8,7 +9,7 @@ import { NzCardTabComponent } from './nz-card-tab.component';
 import { NzCardComponent } from './nz-card.component';
 
 @NgModule({
-  imports     : [ CommonModule ],
+  imports     : [ CommonModule, NzAddOnModule ],
   declarations: [ NzCardComponent, NzCardGridDirective, NzCardMetaComponent, NzCardLoadingComponent, NzCardTabComponent ],
   exports     : [ NzCardComponent, NzCardGridDirective, NzCardMetaComponent, NzCardLoadingComponent, NzCardTabComponent ]
 })