diff --git a/components/avatar/nz-avatar.component.ts b/components/avatar/nz-avatar.component.ts
index e45a206af52..af415622325 100644
--- a/components/avatar/nz-avatar.component.ts
+++ b/components/avatar/nz-avatar.component.ts
@@ -23,7 +23,7 @@ export type NzAvatarSize = 'small' | 'large' | 'default';
   changeDetection    : ChangeDetectionStrategy.OnPush
 })
 export class NzAvatarComponent implements OnChanges {
-  private el: HTMLElement;
+  private el: HTMLElement = this.elementRef.nativeElement;
   private prefixCls = 'ant-avatar';
   private sizeMap = { large: 'lg', small: 'sm' };
   private _icon: string;
@@ -109,8 +109,7 @@ export class NzAvatarComponent implements OnChanges {
     return this;
   }
 
-  constructor(elementRef: ElementRef, private cd: ChangeDetectorRef, private updateHostClassService: NzUpdateHostClassService) {
-    this.el = elementRef.nativeElement;
+  constructor(private elementRef: ElementRef, private cd: ChangeDetectorRef, private updateHostClassService: NzUpdateHostClassService) {
   }
 
   ngOnChanges(changes: SimpleChanges): void {
diff --git a/components/button/nz-button.component.ts b/components/button/nz-button.component.ts
index 0b37fc02ee3..d21c96c145a 100644
--- a/components/button/nz-button.component.ts
+++ b/components/button/nz-button.component.ts
@@ -38,7 +38,7 @@ export class NzButtonComponent implements AfterContentInit, OnInit, OnDestroy {
   private _size: NzButtonSize;
   private _loading = false;
   private _block = false;
-  private el: HTMLElement;
+  private el: HTMLElement = this.elementRef.nativeElement;
   private iconElement: HTMLElement;
   private iconOnly = false;
   private prefixCls = 'ant-btn';
@@ -195,8 +195,6 @@ export class NzButtonComponent implements AfterContentInit, OnInit, OnDestroy {
   }
 
   constructor(private elementRef: ElementRef, private cdr: ChangeDetectorRef, private renderer: Renderer2, private nzUpdateHostClassService: NzUpdateHostClassService, private ngZone: NgZone) {
-    this.el = this.elementRef.nativeElement;
-    this.renderer.addClass(this.el, this.prefixCls);
   }
 
   ngAfterContentInit(): void {
@@ -204,6 +202,7 @@ export class NzButtonComponent implements AfterContentInit, OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
+    this.renderer.addClass(this.el, this.prefixCls);
     this.nzWave.ngOnInit();
   }
 
diff --git a/components/carousel/nz-carousel-content.directive.ts b/components/carousel/nz-carousel-content.directive.ts
index 83b0966d870..4eb7b59bd3f 100755
--- a/components/carousel/nz-carousel-content.directive.ts
+++ b/components/carousel/nz-carousel-content.directive.ts
@@ -19,7 +19,7 @@ export class NzCarouselContentDirective implements OnInit {
   private _left: number;
   private _top: number;
   private _fadeMode = false;
-  el: HTMLElement;
+  el: HTMLElement = this.elementRef.nativeElement;
 
   set width(value: number) {
     this._width = value;
@@ -91,7 +91,6 @@ export class NzCarouselContentDirective implements OnInit {
   }
 
   constructor(private elementRef: ElementRef, private renderer: Renderer2) {
-    this.el = this.elementRef.nativeElement;
   }
 
   ngOnInit(): void {
diff --git a/components/cascader/nz-cascader.component.ts b/components/cascader/nz-cascader.component.ts
index 33070e60f98..64b8964e5d9 100644
--- a/components/cascader/nz-cascader.component.ts
+++ b/components/cascader/nz-cascader.component.ts
@@ -137,7 +137,8 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
   private _menuCls: { [ name: string ]: any };
   private _menuColumnCls: { [ name: string ]: any };
 
-  public el: HTMLElement;
+  public el: HTMLElement = this.elementRef.nativeElement;
+
   private isFocused = false;
 
   /** 选择选项后，渲染显示文本 */
@@ -1119,7 +1120,6 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
   constructor(private elementRef: ElementRef,
               private cdr: ChangeDetectorRef,
               private nzUpdateHostClassService: NzUpdateHostClassService) {
-    this.el = this.elementRef.nativeElement;
   }
 
   private findOption(option: any, index: number): CascaderOption {
diff --git a/components/checkbox/nz-checkbox-group.component.ts b/components/checkbox/nz-checkbox-group.component.ts
index b19a1f74010..9148447f5a9 100644
--- a/components/checkbox/nz-checkbox-group.component.ts
+++ b/components/checkbox/nz-checkbox-group.component.ts
@@ -31,7 +31,7 @@ export interface NzCheckBoxOptionInterface {
 })
 export class NzCheckboxGroupComponent implements ControlValueAccessor, OnInit {
   private _disabled = false;
-  private el: HTMLElement;
+  private el: HTMLElement = this.elementRef.nativeElement;
   private prefixCls = 'ant-checkbox-group';
   private onChange = Function.prototype;
   private onTouched = Function.prototype;
@@ -67,7 +67,6 @@ export class NzCheckboxGroupComponent implements ControlValueAccessor, OnInit {
   }
 
   constructor(private elementRef: ElementRef, private renderer: Renderer2) {
-    this.el = this.elementRef.nativeElement;
   }
 
   ngOnInit(): void {
diff --git a/components/checkbox/nz-checkbox.component.ts b/components/checkbox/nz-checkbox.component.ts
index 430a0678575..c5fb0d53149 100644
--- a/components/checkbox/nz-checkbox.component.ts
+++ b/components/checkbox/nz-checkbox.component.ts
@@ -38,7 +38,7 @@ export class NzCheckboxComponent implements OnInit, ControlValueAccessor, OnChan
   private _indeterminate = false;
   private _autoFocus = false;
   private _checked = false;
-  private el: HTMLElement;
+  private el: HTMLElement = this.elementRef.nativeElement;
   private isInit = false;
   private prefixCls = 'ant-checkbox';
   private onChange = Function.prototype;
@@ -162,7 +162,6 @@ export class NzCheckboxComponent implements OnInit, ControlValueAccessor, OnChan
   }
 
   constructor(private elementRef: ElementRef, private renderer: Renderer2, @Optional() private nzCheckboxWrapperComponent: NzCheckboxWrapperComponent) {
-    this.el = this.elementRef.nativeElement;
   }
 
   ngOnInit(): void {
diff --git a/components/collapse/nz-collapse-panel.component.ts b/components/collapse/nz-collapse-panel.component.ts
index db8598ebe18..8d5f248ac18 100644
--- a/components/collapse/nz-collapse-panel.component.ts
+++ b/components/collapse/nz-collapse-panel.component.ts
@@ -57,7 +57,7 @@ export class NzCollapsePanelComponent implements OnDestroy, OnInit {
   private _active = false;
   private _header: string | TemplateRef<void>;
   isHeaderString: boolean;
-  private el: HTMLElement;
+  private el: HTMLElement = this.elementRef.nativeElement;
   @Output() nzActiveChange = new EventEmitter<boolean>();
 
   @Input() set nzShowArrow(value: boolean) {
@@ -110,7 +110,6 @@ export class NzCollapsePanelComponent implements OnDestroy, OnInit {
   }
 
   constructor(@Host() private nzCollapseComponent: NzCollapseComponent, private elementRef: ElementRef) {
-    this.el = this.elementRef.nativeElement;
   }
 
   ngOnInit(): void {
diff --git a/components/date-picker/date-picker.component.ts b/components/date-picker/date-picker.component.ts
index f7d019f0065..6906d5f7138 100644
--- a/components/date-picker/date-picker.component.ts
+++ b/components/date-picker/date-picker.component.ts
@@ -1,5 +1,6 @@
 import { forwardRef, Component } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NzI18nService } from '../i18n/nz-i18n.service';
 
 import { DateRangePickerComponent } from './date-range-picker.component';
 
@@ -18,4 +19,7 @@ import { DateRangePickerComponent } from './date-range-picker.component';
 
 export class NzDatePickerComponent extends DateRangePickerComponent {
   isRange: boolean = false;
+  constructor(i18n: NzI18nService) {
+    super(i18n);
+  }
 }
diff --git a/components/date-picker/date-range-picker.component.ts b/components/date-picker/date-range-picker.component.ts
index 250437a2f33..b9a33cab892 100644
--- a/components/date-picker/date-range-picker.component.ts
+++ b/components/date-picker/date-range-picker.component.ts
@@ -2,7 +2,6 @@ import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChange
 
 import { FunctionProp } from '../core/types/common-wrap';
 import { toBoolean, valueFunctionProp, InputBoolean } from '../core/util/convert';
-import { LoggerService } from '../core/util/logger/logger.service';
 import { NzI18nService } from '../i18n/nz-i18n.service';
 import { CandyDate } from './lib/candy-date';
 
@@ -39,7 +38,7 @@ export class DateRangePickerComponent extends AbstractPickerComponent implements
   pickerStyle: object; // Final picker style that contains width fix corrections etc.
   extraFooter: TemplateRef<void> | string;
 
-  constructor(i18n: NzI18nService, private logger: LoggerService) {
+  constructor(i18n: NzI18nService) {
     super(i18n);
   }
 
diff --git a/components/date-picker/month-picker.component.ts b/components/date-picker/month-picker.component.ts
index 7c35d0049e4..df19110766a 100644
--- a/components/date-picker/month-picker.component.ts
+++ b/components/date-picker/month-picker.component.ts
@@ -1,5 +1,6 @@
 import { forwardRef, Component, Input } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NzI18nService } from '../i18n/nz-i18n.service';
 
 import { HeaderPickerComponent, SupportHeaderPanel } from './header-picker.component';
 
@@ -20,4 +21,7 @@ export class NzMonthPickerComponent extends HeaderPickerComponent {
   @Input() nzFormat: string = 'yyyy-MM';
 
   endPanelMode: SupportHeaderPanel = 'month';
+  constructor(i18n: NzI18nService) {
+    super(i18n);
+  }
 }
diff --git a/components/date-picker/range-picker.component.ts b/components/date-picker/range-picker.component.ts
index 672def342f8..66e52cfb482 100644
--- a/components/date-picker/range-picker.component.ts
+++ b/components/date-picker/range-picker.component.ts
@@ -1,5 +1,6 @@
 import { forwardRef, Component } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NzI18nService } from '../i18n/nz-i18n.service';
 
 import { DateRangePickerComponent } from './date-range-picker.component';
 
@@ -18,4 +19,8 @@ import { DateRangePickerComponent } from './date-range-picker.component';
 
 export class NzRangePickerComponent extends DateRangePickerComponent {
   isRange: boolean = true;
+  constructor(i18n: NzI18nService) {
+    super(i18n);
+  }
+
 }
diff --git a/components/date-picker/week-picker.component.ts b/components/date-picker/week-picker.component.ts
index 90490468a90..9f4c50c5a12 100644
--- a/components/date-picker/week-picker.component.ts
+++ b/components/date-picker/week-picker.component.ts
@@ -1,5 +1,6 @@
 import { forwardRef, Component } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NzI18nService } from '../i18n/nz-i18n.service';
 
 import { DateRangePickerComponent } from './date-range-picker.component';
 
@@ -18,4 +19,7 @@ import { DateRangePickerComponent } from './date-range-picker.component';
 
 export class NzWeekPickerComponent extends DateRangePickerComponent {
   showWeek: boolean = true;
+  constructor(i18n: NzI18nService) {
+    super(i18n);
+  }
 }
diff --git a/components/date-picker/year-picker.component.ts b/components/date-picker/year-picker.component.ts
index dbeb137b147..42d12619b9d 100644
--- a/components/date-picker/year-picker.component.ts
+++ b/components/date-picker/year-picker.component.ts
@@ -1,5 +1,6 @@
 import { forwardRef, Component, Input } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NzI18nService } from '../i18n/nz-i18n.service';
 
 import { HeaderPickerComponent, SupportHeaderPanel } from './header-picker.component';
 
@@ -20,4 +21,7 @@ export class NzYearPickerComponent extends HeaderPickerComponent {
   @Input() nzFormat: string = 'yyyy';
 
   endPanelMode: SupportHeaderPanel = 'year';
+  constructor(i18n: NzI18nService) {
+    super(i18n);
+  }
 }
diff --git a/components/dropdown/nz-dropdown-button.component.ts b/components/dropdown/nz-dropdown-button.component.ts
index 7ac256162f6..a9f41a54e36 100644
--- a/components/dropdown/nz-dropdown-button.component.ts
+++ b/components/dropdown/nz-dropdown-button.component.ts
@@ -1,11 +1,13 @@
 import {
   AfterViewInit,
+  ChangeDetectorRef,
   Component,
   EventEmitter,
   Input,
   OnDestroy,
   OnInit,
   Output,
+  Renderer2,
   ViewChild
 } from '@angular/core';
 
@@ -59,6 +61,10 @@ export class NzDropDownButtonComponent extends NzDropDownComponent implements On
     this.changeDetector.markForCheck();
   }
 
+  constructor(renderer: Renderer2, changeDetector: ChangeDetectorRef) {
+    super(renderer, changeDetector);
+  }
+
   /** rewrite afterViewInit hook */
   ngAfterViewInit(): void {
     this.startSubscribe(this.$visibleChange);
diff --git a/components/form/nz-form-control.component.ts b/components/form/nz-form-control.component.ts
index 846307339c1..3c960d5df20 100644
--- a/components/form/nz-form-control.component.ts
+++ b/components/form/nz-form-control.component.ts
@@ -1,9 +1,21 @@
-import { AfterContentInit, Component, ContentChild, Input, OnDestroy, OnInit } from '@angular/core';
+import {
+  AfterContentInit,
+  Component,
+  ContentChild,
+  ElementRef,
+  Host,
+  Input,
+  OnDestroy,
+  OnInit,
+  Optional,
+  Renderer2 } from '@angular/core';
 import { FormControl, NgControl } from '@angular/forms';
 import { Subscription } from 'rxjs';
 import { NzUpdateHostClassService } from '../core/services/update-host-class.service';
 import { toBoolean } from '../core/util/convert';
 import { NzColComponent } from '../grid/nz-col.component';
+import { NzRowComponent } from '../grid/nz-row.component';
+import { NzRowDirective } from '../grid/nz-row.directive';
 
 @Component({
   selector           : 'nz-form-control',
@@ -100,6 +112,10 @@ export class NzFormControlComponent extends NzColComponent implements OnDestroy,
     }
   }
 
+  constructor(nzUpdateHostClassService: NzUpdateHostClassService, elementRef: ElementRef, @Optional() @Host() nzRowComponent: NzRowComponent, @Optional() @Host() nzRowDirective: NzRowDirective, renderer: Renderer2) {
+    super(nzUpdateHostClassService, elementRef, nzRowComponent, nzRowDirective, renderer);
+  }
+
   ngOnInit(): void {
     this.setClassMap();
     this.setControlClassMap();
diff --git a/components/form/nz-form-item.component.ts b/components/form/nz-form-item.component.ts
index c72071fe84c..5175bb10c55 100644
--- a/components/form/nz-form-item.component.ts
+++ b/components/form/nz-form-item.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, ElementRef, Input, Renderer2 } from '@angular/core';
 import { NzUpdateHostClassService } from '../core/services/update-host-class.service';
 import { toBoolean } from '../core/util/convert';
 import { NzRowComponent } from '../grid/nz-row.component';
@@ -38,4 +38,8 @@ export class NzFormItemComponent extends NzRowComponent {
   disableHelp(): void {
     this.withHelp--;
   }
+
+  constructor(elementRef: ElementRef, renderer: Renderer2, nzUpdateHostClassService: NzUpdateHostClassService) {
+    super(elementRef, renderer, nzUpdateHostClassService);
+  }
 }
diff --git a/components/form/nz-form-label.component.ts b/components/form/nz-form-label.component.ts
index 0719eb48b51..61d339a9fc1 100644
--- a/components/form/nz-form-label.component.ts
+++ b/components/form/nz-form-label.component.ts
@@ -1,7 +1,9 @@
-import { Component, Input } from '@angular/core';
+import { Component, ElementRef, Host, Input, Optional, Renderer2 } from '@angular/core';
 import { NzUpdateHostClassService } from '../core/services/update-host-class.service';
 import { toBoolean } from '../core/util/convert';
 import { NzColComponent } from '../grid/nz-col.component';
+import { NzRowComponent } from '../grid/nz-row.component';
+import { NzRowDirective } from '../grid/nz-row.directive';
 
 @Component({
   selector           : 'nz-form-label',
@@ -24,4 +26,8 @@ export class NzFormLabelComponent extends NzColComponent {
   get nzRequired(): boolean {
     return this._required;
   }
+
+  constructor(nzUpdateHostClassService: NzUpdateHostClassService, elementRef: ElementRef, @Optional() @Host() nzRowComponent: NzRowComponent, @Optional() @Host() nzRowDirective: NzRowDirective, renderer: Renderer2) {
+    super(nzUpdateHostClassService, elementRef, nzRowComponent, nzRowDirective, renderer);
+  }
 }
diff --git a/components/form/nz-form.directive.ts b/components/form/nz-form.directive.ts
index 609b18e9c59..a4efe7a8207 100644
--- a/components/form/nz-form.directive.ts
+++ b/components/form/nz-form.directive.ts
@@ -6,7 +6,7 @@ import { NzUpdateHostClassService } from '../core/services/update-host-class.ser
   providers: [ NzUpdateHostClassService ]
 })
 export class NzFormDirective implements OnInit {
-  el: HTMLElement;
+  el: HTMLElement = this.elementRef.nativeElement;
   prefixCls = 'ant-form';
   private _layout = 'horizontal';
 
@@ -29,7 +29,6 @@ export class NzFormDirective implements OnInit {
   }
 
   constructor(private elementRef: ElementRef, private renderer: Renderer2, private nzUpdateHostClassService: NzUpdateHostClassService) {
-    this.el = this.elementRef.nativeElement;
   }
 
   ngOnInit(): void {
diff --git a/components/grid/nz-col.component.ts b/components/grid/nz-col.component.ts
index 50c505a3ca7..0ca292779ab 100644
--- a/components/grid/nz-col.component.ts
+++ b/components/grid/nz-col.component.ts
@@ -32,7 +32,7 @@ export interface EmbeddedProperty {
   templateUrl        : './nz-col.component.html'
 })
 export class NzColComponent implements OnInit, OnChanges {
-  private el: HTMLElement;
+  private el: HTMLElement = this.elementRef.nativeElement;
   private prefixCls = 'ant-col';
 
   @HostBinding('style.padding-left.px')
@@ -100,7 +100,6 @@ export class NzColComponent implements OnInit, OnChanges {
   }
 
   constructor(private nzUpdateHostClassService: NzUpdateHostClassService, private elementRef: ElementRef, @Optional() @Host() public nzRowComponent: NzRowComponent, @Optional() @Host() public nzRowDirective: NzRowDirective, private renderer: Renderer2) {
-    this.el = this.elementRef.nativeElement;
   }
 
   ngOnInit(): void {
diff --git a/components/grid/nz-col.directive.ts b/components/grid/nz-col.directive.ts
index 85334053b53..1a76142fb60 100644
--- a/components/grid/nz-col.directive.ts
+++ b/components/grid/nz-col.directive.ts
@@ -1,14 +1,23 @@
 import {
-  Directive
+  Directive,
+  ElementRef,
+  Host,
+  Optional,
+  Renderer2
 } from '@angular/core';
 
 import { NzUpdateHostClassService } from '../core/services/update-host-class.service';
 
 import { NzColComponent } from './nz-col.component';
+import { NzRowComponent } from './nz-row.component';
+import { NzRowDirective } from './nz-row.directive';
 
 @Directive({
   selector : '[nz-col]',
   providers: [ NzUpdateHostClassService ]
 })
 export class NzColDirective extends NzColComponent {
+  constructor(nzUpdateHostClassService: NzUpdateHostClassService, elementRef: ElementRef, @Optional() @Host() nzRowComponent: NzRowComponent, @Optional() @Host() nzRowDirective: NzRowDirective, renderer: Renderer2) {
+    super(nzUpdateHostClassService, elementRef, nzRowComponent, nzRowDirective, renderer);
+  }
 }
diff --git a/components/grid/nz-row.component.ts b/components/grid/nz-row.component.ts
index 86412839658..8c24d94ecec 100644
--- a/components/grid/nz-row.component.ts
+++ b/components/grid/nz-row.component.ts
@@ -40,11 +40,12 @@ const responsiveMap: BreakpointMap = {
   templateUrl        : './nz-row.component.html'
 })
 export class NzRowComponent implements OnInit {
+
   private _gutter: number | object;
   private _type: NzType;
   private _align: NzAlign = 'top';
   private _justify: NzJustify = 'start';
-  private el: HTMLElement;
+  private el: HTMLElement = this.elementRef.nativeElement;
   private prefixCls = 'ant-row';
   private breakPoint: Breakpoint;
   actualGutter: number;
@@ -137,7 +138,6 @@ export class NzRowComponent implements OnInit {
   }
 
   constructor(public elementRef: ElementRef, public renderer: Renderer2, public nzUpdateHostClassService: NzUpdateHostClassService) {
-    this.el = this.elementRef.nativeElement;
   }
 
   ngOnInit(): void {
diff --git a/components/grid/nz-row.directive.ts b/components/grid/nz-row.directive.ts
index 6b2076c7552..6b01076b3e0 100644
--- a/components/grid/nz-row.directive.ts
+++ b/components/grid/nz-row.directive.ts
@@ -1,5 +1,7 @@
 import {
-  Directive
+  Directive,
+  ElementRef,
+  Renderer2
 } from '@angular/core';
 
 import { NzUpdateHostClassService } from '../core/services/update-host-class.service';
@@ -11,4 +13,7 @@ import { NzRowComponent } from './nz-row.component';
   providers: [ NzUpdateHostClassService ]
 })
 export class NzRowDirective extends NzRowComponent {
+  constructor(elementRef: ElementRef, renderer: Renderer2, nzUpdateHostClassService: NzUpdateHostClassService) {
+    super(elementRef, renderer, nzUpdateHostClassService);
+  }
 }
diff --git a/components/input-number/nz-input-number.component.ts b/components/input-number/nz-input-number.component.ts
index 000845d6b97..22983a04636 100644
--- a/components/input-number/nz-input-number.component.ts
+++ b/components/input-number/nz-input-number.component.ts
@@ -39,7 +39,7 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn
   actualValue: string | number;
   isFocused = false;
   value: string | number;
-  el: HTMLElement;
+  el: HTMLElement = this.elementRef.nativeElement;
   prefixCls = 'ant-input-number';
   disabledUp = false;
   disabledDown = false;
@@ -359,7 +359,6 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn
   }
 
   constructor(private elementRef: ElementRef, private renderer: Renderer2) {
-    this.el = this.elementRef.nativeElement;
   }
 
   ngAfterViewInit(): void {
diff --git a/components/input/nz-input.directive.ts b/components/input/nz-input.directive.ts
index def9c67a99f..8b4f36cd729 100644
--- a/components/input/nz-input.directive.ts
+++ b/components/input/nz-input.directive.ts
@@ -30,7 +30,7 @@ export class NzInputDirective implements DoCheck, AfterViewInit {
   private _size = 'default';
   private _disabled = false;
   private _autosize: boolean | AutoSizeType = false;
-  private el: HTMLTextAreaElement | HTMLInputElement;
+  private el: HTMLTextAreaElement | HTMLInputElement = this.elementRef.nativeElement;
   private previousValue: string;
   private previewsMinRows: number;
   private previewsMaxRows: number;
@@ -109,7 +109,6 @@ export class NzInputDirective implements DoCheck, AfterViewInit {
   }
 
   constructor(private elementRef: ElementRef, private renderer: Renderer2, @Optional() private ngModel: NgModel, @Optional() @Self() public ngControl: NgControl) {
-    this.el = this.elementRef.nativeElement;
   }
 
   ngDoCheck(): void {
diff --git a/components/radio/nz-radio-button.component.ts b/components/radio/nz-radio-button.component.ts
index 101adb1f1a3..cf85515e1a2 100644
--- a/components/radio/nz-radio-button.component.ts
+++ b/components/radio/nz-radio-button.component.ts
@@ -1,7 +1,13 @@
+import { DOCUMENT } from '@angular/common';
 import {
   Component,
-  OnInit
+  Inject,
+  OnInit,
+  Optional,
+  Renderer2
 } from '@angular/core';
+
+import { NzRadioGroupComponent } from './nz-radio-group.component';
 import { NzRadioComponent } from './nz-radio.component';
 
 @Component({
@@ -16,4 +22,8 @@ import { NzRadioComponent } from './nz-radio.component';
 })
 export class NzRadioButtonComponent extends NzRadioComponent implements OnInit {
   prefixCls = 'ant-radio-button';
+  /* tslint:disable-next-line:no-any */
+  constructor(@Optional() nzRadioGroup: NzRadioGroupComponent, renderer: Renderer2, @Inject(DOCUMENT) document: any) {
+    super(nzRadioGroup, renderer, document);
+  }
 }
diff --git a/components/radio/nz-radio-group.component.ts b/components/radio/nz-radio-group.component.ts
index e72bb7e1b7a..35a6949bed0 100644
--- a/components/radio/nz-radio-group.component.ts
+++ b/components/radio/nz-radio-group.component.ts
@@ -35,7 +35,7 @@ export class NzRadioGroupComponent implements AfterContentInit, ControlValueAcce
   private _size: NzRadioGroupSizeType = 'default';
   private _name: string;
   private _disabled: boolean;
-  el: HTMLElement;
+  el: HTMLElement = this.elementRef.nativeElement;
   value: string;
 
   // ngModel Access
@@ -130,7 +130,6 @@ export class NzRadioGroupComponent implements AfterContentInit, ControlValueAcce
   }
 
   constructor(private elementRef: ElementRef) {
-    this.el = this.elementRef.nativeElement;
   }
 
   ngAfterContentInit(): void {
diff --git a/components/select/nz-option-li.component.ts b/components/select/nz-option-li.component.ts
index 40606d8f1d5..84ace31bb86 100644
--- a/components/select/nz-option-li.component.ts
+++ b/components/select/nz-option-li.component.ts
@@ -15,7 +15,7 @@ import { NzOptionComponent } from './nz-option.component';
   }
 })
 export class NzOptionLiComponent {
-  el: Element;
+  el: HTMLElement = this.elementRef.nativeElement;
   selected = false;
   active = false;
   @Input() nzOption: NzOptionComponent;
@@ -40,6 +40,5 @@ export class NzOptionLiComponent {
   }
 
   constructor(private elementRef: ElementRef) {
-    this.el = elementRef.nativeElement;
   }
 }
diff --git a/components/spin/nz-spin.component.ts b/components/spin/nz-spin.component.ts
index 85ee1b61bc6..e76594ec0b9 100644
--- a/components/spin/nz-spin.component.ts
+++ b/components/spin/nz-spin.component.ts
@@ -24,7 +24,8 @@ import { toBoolean } from '../core/util/convert';
 export class NzSpinComponent implements AfterViewInit {
   private _tip: string;
   private _delay = 0;
-  el: HTMLElement;
+  el: HTMLElement = this.elementRef.nativeElement;
+
   baseSpinning$ = new BehaviorSubject(true);
   resultSpinning$: Observable<boolean> = this.baseSpinning$.asObservable().pipe(debounceTime(this.nzDelay));
   @ViewChild('containerElement') containerElement: ElementRef;
@@ -75,7 +76,6 @@ export class NzSpinComponent implements AfterViewInit {
   }
 
   constructor(private elementRef: ElementRef, private renderer: Renderer2, private zone: NgZone) {
-    this.el = this.elementRef.nativeElement;
   }
 
   ngAfterViewInit(): void {
diff --git a/components/steps/nz-step.component.ts b/components/steps/nz-step.component.ts
index 08b849f64d1..af4f5925011 100644
--- a/components/steps/nz-step.component.ts
+++ b/components/steps/nz-step.component.ts
@@ -23,7 +23,7 @@ export class NzStepComponent {
   private _description: string | TemplateRef<void>;
   private _icon: StepNgClassType | TemplateRef<void>;
   private _title: string | TemplateRef<void>;
-  private el: HTMLElement;
+  private el: HTMLElement = this.elementRef.nativeElement;
   oldAPIIcon = true; // Make the user defined icon compatible to old API. Should be removed in 2.0.
   isCustomStatus = false;
   isDescriptionString = true;
@@ -122,6 +122,5 @@ export class NzStepComponent {
   }
 
   constructor(private elementRef: ElementRef, private nzUpdateHostClassService: NzUpdateHostClassService) {
-    this.el = elementRef.nativeElement;
   }
 }
diff --git a/components/table/nz-table.component.ts b/components/table/nz-table.component.ts
index ce089b4f07f..51b1466ba4a 100644
--- a/components/table/nz-table.component.ts
+++ b/components/table/nz-table.component.ts
@@ -56,7 +56,7 @@ export class NzTableComponent implements OnInit, AfterViewInit, OnDestroy {
   isFooterString: boolean;
   isTitleString: boolean;
   isNoResultString: boolean;
-  el: HTMLElement;
+  el: HTMLElement = this.elementRef.nativeElement;
   lastScrollLeft = 0;
   /* tslint:disable-next-line:no-any */
   rawData: any[] = [];
@@ -376,6 +376,5 @@ export class NzTableComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   constructor(private renderer: Renderer2, private ngZone: NgZone, private elementRef: ElementRef, private cdr: ChangeDetectorRef, private nzMeasureScrollbarService: NzMeasureScrollbarService, private i18n: NzI18nService) {
-    this.el = this.elementRef.nativeElement;
   }
 }
diff --git a/components/table/nz-td.component.ts b/components/table/nz-td.component.ts
index 8023230e53c..a4245cdfde6 100644
--- a/components/table/nz-td.component.ts
+++ b/components/table/nz-td.component.ts
@@ -21,7 +21,7 @@ export class NzTdComponent {
   private _expand = false;
   private _showCheckbox = false;
   isIndentSizeSet = false;
-  el: HTMLElement;
+  el: HTMLElement = this.elementRef.nativeElement;
   @Input() nzChecked = false;
   @Input() nzDisabled = false;
   @Input() nzIndeterminate = false;
@@ -108,6 +108,5 @@ export class NzTdComponent {
   }
 
   constructor(private elementRef: ElementRef, private renderer: Renderer2) {
-    this.el = this.elementRef.nativeElement;
   }
 }
diff --git a/components/table/nz-th.component.ts b/components/table/nz-th.component.ts
index 68a7db11625..4b4090372fe 100644
--- a/components/table/nz-th.component.ts
+++ b/components/table/nz-th.component.ts
@@ -39,7 +39,7 @@ export class NzThComponent {
   private _showRowSelection = false;
   private _hasDefaultFilter = false;
   private _customFilter = false;
-  el: HTMLElement;
+  el: HTMLElement = this.elementRef.nativeElement;
   hasFilterValue = false;
   filterVisible = false;
   multipleFilterList: NzThItemInterface[] = [];
@@ -296,6 +296,5 @@ export class NzThComponent {
   }
 
   constructor(private elementRef: ElementRef, private renderer: Renderer2) {
-    this.el = this.elementRef.nativeElement;
   }
 }
diff --git a/components/tabs/nz-tabset.component.ts b/components/tabs/nz-tabset.component.ts
index 46dc877bf5d..00a496c76d1 100644
--- a/components/tabs/nz-tabset.component.ts
+++ b/components/tabs/nz-tabset.component.ts
@@ -61,7 +61,7 @@ export class NzTabSetComponent implements AfterContentChecked, OnInit, AfterView
   private _type: NzTabType = 'line';
   private _size = 'default';
   private _animated: NzAnimatedInterface | boolean = true;
-  el: HTMLElement;
+  el: HTMLElement = this.elementRef.nativeElement;
   prefixCls = 'ant-tabs';
   tabPositionMode: NzTabPositionMode = 'horizontal';
   inkBarAnimated = true;
@@ -247,7 +247,6 @@ export class NzTabSetComponent implements AfterContentChecked, OnInit, AfterView
 
   // tslint:disable-next-line:no-any
   constructor(private renderer: Renderer2, private nzUpdateHostClassService: NzUpdateHostClassService, private elementRef: ElementRef, @Optional() @Inject(DOCUMENT) private document: any) {
-    this.el = this.elementRef.nativeElement;
   }
 
   ngAfterViewInit(): void {