diff --git a/components/affix/nz-affix.component.ts b/components/affix/nz-affix.component.ts
index fb61a41ba0e..d5fc1d26375 100644
--- a/components/affix/nz-affix.component.ts
+++ b/components/affix/nz-affix.component.ts
@@ -21,6 +21,7 @@ import { throttleByAnimationFrameDecorator } from '../core/util/throttleByAnimat
 
 @Component({
   selector: 'nz-affix',
+  exportAs: 'nzAffix',
   templateUrl: './nz-affix.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   styles: [
diff --git a/components/alert/nz-alert.component.ts b/components/alert/nz-alert.component.ts
index d1ed33ced67..125f3a9197c 100644
--- a/components/alert/nz-alert.component.ts
+++ b/components/alert/nz-alert.component.ts
@@ -15,6 +15,7 @@ import { InputBoolean } from '../core/util/convert';
 
 @Component({
   selector: 'nz-alert',
+  exportAs: 'nzAlert',
   animations: [slideAlertMotion],
   templateUrl: './nz-alert.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/components/anchor/nz-anchor-link.component.ts b/components/anchor/nz-anchor-link.component.ts
index a63581eae74..b9716da9a58 100644
--- a/components/anchor/nz-anchor-link.component.ts
+++ b/components/anchor/nz-anchor-link.component.ts
@@ -16,6 +16,7 @@ import { NzAnchorComponent } from './nz-anchor.component';
 
 @Component({
   selector: 'nz-link',
+  exportAs: 'nzLink',
   preserveWhitespaces: false,
   templateUrl: './nz-anchor-link.component.html',
   host: {
diff --git a/components/anchor/nz-anchor.component.ts b/components/anchor/nz-anchor.component.ts
index dc3d6fe32e4..83858ec802d 100644
--- a/components/anchor/nz-anchor.component.ts
+++ b/components/anchor/nz-anchor.component.ts
@@ -30,6 +30,7 @@ const sharpMatcherRegx = /#([^#]+)$/;
 
 @Component({
   selector: 'nz-anchor',
+  exportAs: 'nzAnchor',
   preserveWhitespaces: false,
   templateUrl: './nz-anchor.component.html',
   encapsulation: ViewEncapsulation.None,
diff --git a/components/auto-complete/nz-autocomplete-optgroup.component.ts b/components/auto-complete/nz-autocomplete-optgroup.component.ts
index 46ce7058c69..f3c09b8a619 100644
--- a/components/auto-complete/nz-autocomplete-optgroup.component.ts
+++ b/components/auto-complete/nz-autocomplete-optgroup.component.ts
@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulati
 
 @Component({
   selector: 'nz-auto-optgroup',
+  exportAs: 'nzAutoOptgroup',
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
diff --git a/components/auto-complete/nz-autocomplete-option.component.ts b/components/auto-complete/nz-autocomplete-option.component.ts
index 1ae8f5d45f0..f6dfcb14dc8 100644
--- a/components/auto-complete/nz-autocomplete-option.component.ts
+++ b/components/auto-complete/nz-autocomplete-option.component.ts
@@ -18,6 +18,7 @@ export class NzOptionSelectionChange {
 
 @Component({
   selector: 'nz-auto-option',
+  exportAs: 'nzAutoOption',
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
diff --git a/components/auto-complete/nz-autocomplete-trigger.directive.ts b/components/auto-complete/nz-autocomplete-trigger.directive.ts
index bc6e68191d2..8cab07d716e 100644
--- a/components/auto-complete/nz-autocomplete-trigger.directive.ts
+++ b/components/auto-complete/nz-autocomplete-trigger.directive.ts
@@ -46,6 +46,7 @@ export function getNzAutocompleteMissingPanelError(): Error {
 
 @Directive({
   selector: `input[nzAutocomplete], textarea[nzAutocomplete]`,
+  exportAs: 'nzAutocompleteTrigger',
   providers: [NZ_AUTOCOMPLETE_VALUE_ACCESSOR],
   host: {
     autocomplete: 'off',
diff --git a/components/auto-complete/nz-autocomplete.component.ts b/components/auto-complete/nz-autocomplete.component.ts
index ef5ce12c066..d059f92c66a 100644
--- a/components/auto-complete/nz-autocomplete.component.ts
+++ b/components/auto-complete/nz-autocomplete.component.ts
@@ -36,6 +36,7 @@ export type AutocompleteDataSource = AutocompleteDataSourceItem[] | string[] | n
 
 @Component({
   selector: 'nz-autocomplete',
+  exportAs: 'nzAutocomplete',
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
diff --git a/components/avatar/nz-avatar.component.ts b/components/avatar/nz-avatar.component.ts
index 632dbf9d8b9..422df1c51b5 100644
--- a/components/avatar/nz-avatar.component.ts
+++ b/components/avatar/nz-avatar.component.ts
@@ -23,6 +23,7 @@ export interface NzAvatarSizeMap {
 
 @Component({
   selector: 'nz-avatar',
+  exportAs: 'nzAvatar',
   templateUrl: './nz-avatar.component.html',
   providers: [NzUpdateHostClassService],
   preserveWhitespaces: false,
diff --git a/components/back-top/nz-back-top.component.ts b/components/back-top/nz-back-top.component.ts
index 8cc1438675b..cb9506816f4 100644
--- a/components/back-top/nz-back-top.component.ts
+++ b/components/back-top/nz-back-top.component.ts
@@ -22,6 +22,7 @@ import { toNumber } from '../core/util/convert';
 
 @Component({
   selector: 'nz-back-top',
+  exportAs: 'nzBackTop',
   animations: [fadeMotion],
   templateUrl: './nz-back-top.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/components/badge/nz-badge.component.ts b/components/badge/nz-badge.component.ts
index 774bfcd9f65..b9b4aa6170f 100644
--- a/components/badge/nz-badge.component.ts
+++ b/components/badge/nz-badge.component.ts
@@ -20,6 +20,7 @@ export type NzBadgeStatusType = 'success' | 'processing' | 'default' | 'error' |
 
 @Component({
   selector: 'nz-badge',
+  exportAs: 'nzBadge',
   preserveWhitespaces: false,
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/components/breadcrumb/nz-breadcrumb-item.component.ts b/components/breadcrumb/nz-breadcrumb-item.component.ts
index ba445ea88e9..fcb0d206a19 100755
--- a/components/breadcrumb/nz-breadcrumb-item.component.ts
+++ b/components/breadcrumb/nz-breadcrumb-item.component.ts
@@ -6,6 +6,7 @@ import { NzBreadCrumbComponent } from './nz-breadcrumb.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   selector: 'nz-breadcrumb-item',
+  exportAs: 'nzBreadcrumbItem',
   preserveWhitespaces: false,
   templateUrl: 'nz-breadcrumb-item.component.html',
   styles: [
diff --git a/components/breadcrumb/nz-breadcrumb.component.ts b/components/breadcrumb/nz-breadcrumb.component.ts
index 8bab4a34c94..de69b985b93 100755
--- a/components/breadcrumb/nz-breadcrumb.component.ts
+++ b/components/breadcrumb/nz-breadcrumb.component.ts
@@ -30,6 +30,7 @@ export interface BreadcrumbOption {
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   selector: 'nz-breadcrumb',
+  exportAs: 'nzBreadcrumb',
   preserveWhitespaces: false,
   templateUrl: './nz-breadcrumb.component.html',
   styles: [
diff --git a/components/button/nz-button-group.component.ts b/components/button/nz-button-group.component.ts
index 81a97691639..0b70447846c 100644
--- a/components/button/nz-button-group.component.ts
+++ b/components/button/nz-button-group.component.ts
@@ -4,6 +4,7 @@ import { NzSizeLDSType } from '../core/types/size';
 
 @Component({
   selector: 'nz-button-group',
+  exportAs: 'nzButtonGroup',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
diff --git a/components/button/nz-button.component.ts b/components/button/nz-button.component.ts
index 31d36556b26..fceded4162b 100644
--- a/components/button/nz-button.component.ts
+++ b/components/button/nz-button.component.ts
@@ -34,6 +34,7 @@ export type NzButtonShape = 'circle' | 'round' | null;
 
 @Component({
   selector: '[nz-button]',
+  exportAs: 'nzButton',
   providers: [NzUpdateHostClassService],
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/components/calendar/nz-calendar-cells.ts b/components/calendar/nz-calendar-cells.ts
index 572eb4ca8b8..2acec191eaf 100644
--- a/components/calendar/nz-calendar-cells.ts
+++ b/components/calendar/nz-calendar-cells.ts
@@ -1,21 +1,25 @@
 import { Directive } from '@angular/core';
 
 @Directive({
-  selector: '[nzDateCell]'
+  selector: '[nzDateCell]',
+  exportAs: 'nzDateCell'
 })
 export class NzDateCellDirective {}
 
 @Directive({
-  selector: '[nzMonthCell]'
+  selector: '[nzMonthCell]',
+  exportAs: 'nzMonthCell'
 })
 export class NzMonthCellDirective {}
 
 @Directive({
-  selector: '[nzDateFullCell]'
+  selector: '[nzDateFullCell]',
+  exportAs: 'nzDateFullCell'
 })
 export class NzDateFullCellDirective {}
 
 @Directive({
-  selector: '[nzMonthFullCell]'
+  selector: '[nzMonthFullCell]',
+  exportAs: 'nzMonthFullCell'
 })
 export class NzMonthFullCellDirective {}
diff --git a/components/calendar/nz-calendar-header.component.ts b/components/calendar/nz-calendar-header.component.ts
index c023954d9e9..7ef608e6c84 100644
--- a/components/calendar/nz-calendar-header.component.ts
+++ b/components/calendar/nz-calendar-header.component.ts
@@ -15,6 +15,7 @@ import { NzI18nService as I18n } from '../i18n/nz-i18n.service';
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'nz-calendar-header',
+  exportAs: 'nzCalendarHeader',
   templateUrl: './nz-calendar-header.component.html',
   host: {
     '[style.display]': `'block'`,
diff --git a/components/calendar/nz-calendar.component.ts b/components/calendar/nz-calendar.component.ts
index 005644ccca8..1e280d66549 100644
--- a/components/calendar/nz-calendar.component.ts
+++ b/components/calendar/nz-calendar.component.ts
@@ -44,6 +44,7 @@ export type ModeType = 'month' | 'year';
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'nz-calendar',
+  exportAs: 'nzCalendar',
   templateUrl: './nz-calendar.component.html',
   providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NzCalendarComponent), multi: true }]
 })
diff --git a/components/card/nz-card-grid.directive.ts b/components/card/nz-card-grid.directive.ts
index f84d8dd6c81..f43786babab 100644
--- a/components/card/nz-card-grid.directive.ts
+++ b/components/card/nz-card-grid.directive.ts
@@ -1,7 +1,8 @@
 import { Directive, ElementRef, Renderer2 } from '@angular/core';
 
 @Directive({
-  selector: '[nz-card-grid]'
+  selector: '[nz-card-grid]',
+  exportAs: 'nzCardGrid'
 })
 export class NzCardGridDirective {
   constructor(elementRef: ElementRef, renderer: Renderer2) {
diff --git a/components/card/nz-card-loading.component.ts b/components/card/nz-card-loading.component.ts
index a3599547c7d..cbb25489e36 100644
--- a/components/card/nz-card-loading.component.ts
+++ b/components/card/nz-card-loading.component.ts
@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, ElementRef, Renderer2, ViewEncapsul
 
 @Component({
   selector: 'nz-card-loading',
+  exportAs: 'nzCardLoading',
   templateUrl: './nz-card-loading.component.html',
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/components/card/nz-card-meta.component.ts b/components/card/nz-card-meta.component.ts
index d0ac573d7da..6659d7c9356 100755
--- a/components/card/nz-card-meta.component.ts
+++ b/components/card/nz-card-meta.component.ts
@@ -10,6 +10,7 @@ import {
 
 @Component({
   selector: 'nz-card-meta',
+  exportAs: 'nzCardMeta',
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
diff --git a/components/card/nz-card-tab.component.ts b/components/card/nz-card-tab.component.ts
index fa9977ba1db..1644cca8b69 100644
--- a/components/card/nz-card-tab.component.ts
+++ b/components/card/nz-card-tab.component.ts
@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, TemplateRef, ViewChild, ViewEncapsu
 
 @Component({
   selector: 'nz-card-tab',
+  exportAs: 'nzCardTab',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './nz-card-tab.component.html'
diff --git a/components/card/nz-card.component.ts b/components/card/nz-card.component.ts
index 8e215606acd..3715e66db4f 100755
--- a/components/card/nz-card.component.ts
+++ b/components/card/nz-card.component.ts
@@ -13,6 +13,7 @@ import { NzCardTabComponent } from './nz-card-tab.component';
 
 @Component({
   selector: 'nz-card',
+  exportAs: 'nzCard',
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
diff --git a/components/carousel/nz-carousel-content.directive.ts b/components/carousel/nz-carousel-content.directive.ts
index cbcf958caf9..9b58c6d9101 100755
--- a/components/carousel/nz-carousel-content.directive.ts
+++ b/components/carousel/nz-carousel-content.directive.ts
@@ -1,7 +1,8 @@
 import { Directive, ElementRef, Renderer2 } from '@angular/core';
 
 @Directive({
-  selector: '[nz-carousel-content]'
+  selector: '[nz-carousel-content]',
+  exportAs: 'nzCarouselContent'
 })
 export class NzCarouselContentDirective {
   el: HTMLElement = this.elementRef.nativeElement;
diff --git a/components/carousel/nz-carousel.component.ts b/components/carousel/nz-carousel.component.ts
index 6bb4fee2f49..885c8c420dc 100755
--- a/components/carousel/nz-carousel.component.ts
+++ b/components/carousel/nz-carousel.component.ts
@@ -39,6 +39,7 @@ import { NzCarouselTransformStrategy } from './strategies/transform-strategy';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   selector: 'nz-carousel',
+  exportAs: 'nzCarousel',
   preserveWhitespaces: false,
   templateUrl: './nz-carousel.component.html',
   host: {
diff --git a/components/cascader/nz-cascader-li.component.ts b/components/cascader/nz-cascader-li.component.ts
index 65cf8f8049f..19d0640f783 100644
--- a/components/cascader/nz-cascader-li.component.ts
+++ b/components/cascader/nz-cascader-li.component.ts
@@ -14,6 +14,7 @@ import { CascaderOption } from './nz-cascader-definitions';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   selector: '[nz-cascader-option]',
+  exportAs: 'nzCascaderOption',
   templateUrl: './nz-cascader-li.component.html',
   host: {
     '[attr.title]': 'option.title || getOptionLabel()',
diff --git a/components/cascader/nz-cascader.component.ts b/components/cascader/nz-cascader.component.ts
index e4d5f2e048b..ebf1ac41372 100644
--- a/components/cascader/nz-cascader.component.ts
+++ b/components/cascader/nz-cascader.component.ts
@@ -50,6 +50,7 @@ const defaultDisplayRender = (labels: string[]) => labels.join(' / ');
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   selector: 'nz-cascader,[nz-cascader]',
+  exportAs: 'nzCascader',
   preserveWhitespaces: false,
   templateUrl: './nz-cascader.component.html',
   animations: [slideMotion],
diff --git a/components/checkbox/nz-checkbox-group.component.ts b/components/checkbox/nz-checkbox-group.component.ts
index 64d85184feb..7740601d878 100644
--- a/components/checkbox/nz-checkbox-group.component.ts
+++ b/components/checkbox/nz-checkbox-group.component.ts
@@ -21,6 +21,7 @@ export interface NzCheckBoxOptionInterface {
 
 @Component({
   selector: 'nz-checkbox-group',
+  exportAs: 'nzCheckboxGroup',
   preserveWhitespaces: false,
   encapsulation: ViewEncapsulation.None,
   templateUrl: './nz-checkbox-group.component.html',
diff --git a/components/checkbox/nz-checkbox-wrapper.component.ts b/components/checkbox/nz-checkbox-wrapper.component.ts
index 050135359d8..8226d227572 100644
--- a/components/checkbox/nz-checkbox-wrapper.component.ts
+++ b/components/checkbox/nz-checkbox-wrapper.component.ts
@@ -12,6 +12,7 @@ import { NzCheckboxComponent } from './nz-checkbox.component';
 
 @Component({
   selector: 'nz-checkbox-wrapper',
+  exportAs: 'nzCheckboxWrapper',
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
diff --git a/components/checkbox/nz-checkbox.component.ts b/components/checkbox/nz-checkbox.component.ts
index 0302f8b8479..4e5f3f8e1f9 100644
--- a/components/checkbox/nz-checkbox.component.ts
+++ b/components/checkbox/nz-checkbox.component.ts
@@ -25,6 +25,7 @@ import { NzCheckboxWrapperComponent } from './nz-checkbox-wrapper.component';
 
 @Component({
   selector: '[nz-checkbox]',
+  exportAs: 'nzCheckbox',
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
diff --git a/components/collapse/nz-collapse-panel.component.ts b/components/collapse/nz-collapse-panel.component.ts
index 126591adb9e..904186927ef 100644
--- a/components/collapse/nz-collapse-panel.component.ts
+++ b/components/collapse/nz-collapse-panel.component.ts
@@ -21,6 +21,7 @@ import { NzCollapseComponent } from './nz-collapse.component';
 
 @Component({
   selector: 'nz-collapse-panel',
+  exportAs: 'nzCollapsePanel',
   templateUrl: './nz-collapse-panel.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
diff --git a/components/collapse/nz-collapse.component.ts b/components/collapse/nz-collapse.component.ts
index d032c14217a..c347344f755 100644
--- a/components/collapse/nz-collapse.component.ts
+++ b/components/collapse/nz-collapse.component.ts
@@ -4,6 +4,7 @@ import { NzCollapsePanelComponent } from './nz-collapse-panel.component';
 
 @Component({
   selector: 'nz-collapse',
+  exportAs: 'nzCollapse',
   templateUrl: './nz-collapse.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
diff --git a/components/comment/nz-comment-cells.ts b/components/comment/nz-comment-cells.ts
index ff2e4e63e24..8da07c485bf 100644
--- a/components/comment/nz-comment-cells.ts
+++ b/components/comment/nz-comment-cells.ts
@@ -14,18 +14,21 @@ import {
 } from '@angular/core';
 
 @Directive({
-  selector: 'nz-avatar[nz-comment-avatar]'
+  selector: 'nz-avatar[nz-comment-avatar]',
+  exportAs: 'nzCommentAvatar'
 })
 export class NzCommentAvatarDirective {}
 
 @Directive({
   selector: 'nz-comment-content, [nz-comment-content]',
+  exportAs: 'nzCommentContent',
   host: { class: 'ant-comment-content-detail' }
 })
 export class NzCommentContentDirective {}
 
 @Directive({
-  selector: '[nzCommentActionHost]'
+  selector: '[nzCommentActionHost]',
+  exportAs: 'nzCommentActionHost'
 })
 export class NzCommentActionHostDirective extends CdkPortalOutlet implements OnInit, OnDestroy {
   @Input() nzCommentActionHost: TemplatePortal | null;
@@ -46,6 +49,7 @@ export class NzCommentActionHostDirective extends CdkPortalOutlet implements OnI
 
 @Component({
   selector: 'nz-comment-action',
+  exportAs: 'nzCommentAction',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-template><ng-content></ng-content></ng-template>'
diff --git a/components/comment/nz-comment.component.ts b/components/comment/nz-comment.component.ts
index 0832f7662f5..fd0e5f5bb5d 100644
--- a/components/comment/nz-comment.component.ts
+++ b/components/comment/nz-comment.component.ts
@@ -11,6 +11,7 @@ import { NzCommentActionComponent as CommentAction } from './nz-comment-cells';
 
 @Component({
   selector: 'nz-comment',
+  exportAs: 'nzComment',
   templateUrl: './nz-comment.component.html',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/components/core/addon/classlist_add.ts b/components/core/addon/classlist_add.ts
index e7ef37b620d..bf0a2adde4d 100644
--- a/components/core/addon/classlist_add.ts
+++ b/components/core/addon/classlist_add.ts
@@ -1,7 +1,8 @@
 import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
 
 @Directive({
-  selector: '[nzClassListAdd]'
+  selector: '[nzClassListAdd]',
+  exportAs: 'nzClassListAdd'
 })
 export class NzClassListAddDirective {
   classList: string[] = [];
diff --git a/components/core/addon/string_template_outlet.ts b/components/core/addon/string_template_outlet.ts
index 65478b528d9..7cb88a741a5 100644
--- a/components/core/addon/string_template_outlet.ts
+++ b/components/core/addon/string_template_outlet.ts
@@ -1,7 +1,8 @@
 import { Directive, EmbeddedViewRef, Input, TemplateRef, ViewContainerRef } from '@angular/core';
 
 @Directive({
-  selector: '[nzStringTemplateOutlet]'
+  selector: '[nzStringTemplateOutlet]',
+  exportAs: 'nzStringTemplateOutlet'
 })
 export class NzStringTemplateOutletDirective {
   private isTemplate: boolean;
diff --git a/components/core/no-animation/nz-no-animation.directive.ts b/components/core/no-animation/nz-no-animation.directive.ts
index 2fd08c59822..7327883c2d2 100644
--- a/components/core/no-animation/nz-no-animation.directive.ts
+++ b/components/core/no-animation/nz-no-animation.directive.ts
@@ -7,6 +7,7 @@ const DISABLED_CLASSNAME = 'nz-animate-disabled';
 
 @Directive({
   selector: '[nzNoAnimation]',
+  exportAs: 'nzNoAnimation',
   host: {
     '[@.disabled]': 'nzNoAnimation'
   }
diff --git a/components/core/overlay/nz-connected-overlay.ts b/components/core/overlay/nz-connected-overlay.ts
index 48d81d6b4f9..0f68d532e10 100644
--- a/components/core/overlay/nz-connected-overlay.ts
+++ b/components/core/overlay/nz-connected-overlay.ts
@@ -2,7 +2,8 @@ import { CdkConnectedOverlay } from '@angular/cdk/overlay';
 import { Directive } from '@angular/core';
 
 @Directive({
-  selector: '[cdkConnectedOverlay][nzConnectedOverlay]'
+  selector: '[cdkConnectedOverlay][nzConnectedOverlay]',
+  exportAs: 'nzConnectedOverlay'
 })
 export class NzConnectedOverlayDirective {
   constructor(private cdkConnectedOverlay: CdkConnectedOverlay) {
diff --git a/components/core/wave/nz-wave.directive.ts b/components/core/wave/nz-wave.directive.ts
index ca6a985cff3..74b9f2531fc 100644
--- a/components/core/wave/nz-wave.directive.ts
+++ b/components/core/wave/nz-wave.directive.ts
@@ -30,7 +30,8 @@ export function NZ_WAVE_GLOBAL_CONFIG_FACTORY(): NzWaveConfig {
 }
 
 @Directive({
-  selector: '[nz-wave]'
+  selector: '[nz-wave]',
+  exportAs: 'nzWave'
 })
 export class NzWaveDirective implements OnInit, OnDestroy {
   @Input() nzWaveExtraNode = false;
diff --git a/components/date-picker/date-picker.component.ts b/components/date-picker/date-picker.component.ts
index a3708cb01ff..edfdd3092bb 100644
--- a/components/date-picker/date-picker.component.ts
+++ b/components/date-picker/date-picker.component.ts
@@ -21,6 +21,7 @@ import { DateRangePickerComponent } from './date-range-picker.component';
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'nz-date-picker',
+  exportAs: 'nzDatePicker',
   templateUrl: './date-range-picker.component.html',
   providers: [
     {
diff --git a/components/date-picker/lib/calendar/calendar-footer.component.ts b/components/date-picker/lib/calendar/calendar-footer.component.ts
index fa4cfead1d1..4fc546e1f31 100644
--- a/components/date-picker/lib/calendar/calendar-footer.component.ts
+++ b/components/date-picker/lib/calendar/calendar-footer.component.ts
@@ -17,6 +17,7 @@ import { CandyDate } from '../candy-date';
   changeDetection: ChangeDetectionStrategy.OnPush,
   // tslint:disable-next-line:component-selector
   selector: 'calendar-footer',
+  exportAs: 'calendarFooter',
   templateUrl: 'calendar-footer.component.html'
 })
 export class CalendarFooterComponent {
diff --git a/components/date-picker/lib/calendar/calendar-header.component.ts b/components/date-picker/lib/calendar/calendar-header.component.ts
index 3e380a5093a..15a3e0f926e 100644
--- a/components/date-picker/lib/calendar/calendar-header.component.ts
+++ b/components/date-picker/lib/calendar/calendar-header.component.ts
@@ -20,6 +20,7 @@ import { CandyDate } from '../candy-date';
   changeDetection: ChangeDetectionStrategy.OnPush,
   // tslint:disable-next-line:component-selector
   selector: 'calendar-header',
+  exportAs: 'calendarHeader',
   templateUrl: 'calendar-header.component.html'
 })
 export class CalendarHeaderComponent implements OnInit, OnChanges {
diff --git a/components/date-picker/lib/calendar/calendar-input.component.ts b/components/date-picker/lib/calendar/calendar-input.component.ts
index a5d7e32b583..ccd1e747d27 100644
--- a/components/date-picker/lib/calendar/calendar-input.component.ts
+++ b/components/date-picker/lib/calendar/calendar-input.component.ts
@@ -17,6 +17,7 @@ import { CandyDate } from '../candy-date';
   changeDetection: ChangeDetectionStrategy.OnPush,
   // tslint:disable-next-line:component-selector
   selector: 'calendar-input',
+  exportAs: 'calendarInput',
   templateUrl: 'calendar-input.component.html'
 })
 export class CalendarInputComponent implements OnInit {
diff --git a/components/date-picker/lib/calendar/ok-button.component.ts b/components/date-picker/lib/calendar/ok-button.component.ts
index c9e919af00f..8a808edda85 100644
--- a/components/date-picker/lib/calendar/ok-button.component.ts
+++ b/components/date-picker/lib/calendar/ok-button.component.ts
@@ -7,6 +7,7 @@ import { NzCalendarI18nInterface } from '../../../i18n/nz-i18n.interface';
   changeDetection: ChangeDetectionStrategy.OnPush,
   // tslint:disable-next-line:component-selector
   selector: 'ok-button',
+  exportAs: 'okButton',
   templateUrl: 'ok-button.component.html'
 })
 export class OkButtonComponent {
diff --git a/components/date-picker/lib/calendar/time-picker-button.component.ts b/components/date-picker/lib/calendar/time-picker-button.component.ts
index dfd76354900..2257af326ce 100644
--- a/components/date-picker/lib/calendar/time-picker-button.component.ts
+++ b/components/date-picker/lib/calendar/time-picker-button.component.ts
@@ -7,6 +7,7 @@ import { NzCalendarI18nInterface } from '../../../i18n/nz-i18n.interface';
   changeDetection: ChangeDetectionStrategy.OnPush,
   // tslint:disable-next-line:component-selector
   selector: 'time-picker-button',
+  exportAs: 'timePickerButton',
   templateUrl: 'time-picker-button.component.html'
 })
 export class TimePickerButtonComponent {
diff --git a/components/date-picker/lib/calendar/today-button.component.ts b/components/date-picker/lib/calendar/today-button.component.ts
index b76c65f080b..52189f64131 100644
--- a/components/date-picker/lib/calendar/today-button.component.ts
+++ b/components/date-picker/lib/calendar/today-button.component.ts
@@ -19,6 +19,7 @@ import { CandyDate } from '../candy-date';
   changeDetection: ChangeDetectionStrategy.OnPush,
   // tslint:disable-next-line:component-selector
   selector: 'today-button',
+  exportAs: 'todayButton',
   templateUrl: 'today-button.component.html'
 })
 export class TodayButtonComponent implements OnInit, OnChanges {
diff --git a/components/date-picker/lib/date/date-table.component.ts b/components/date-picker/lib/date/date-table.component.ts
index ac638c7bd30..6897c0bb2a6 100644
--- a/components/date-picker/lib/date/date-table.component.ts
+++ b/components/date-picker/lib/date/date-table.component.ts
@@ -28,6 +28,7 @@ const DATE_COL_NUM = 7;
   changeDetection: ChangeDetectionStrategy.OnPush,
   // tslint:disable-next-line:component-selector
   selector: 'date-table',
+  exportAs: 'dateTable',
   templateUrl: 'date-table.component.html'
 })
 export class DateTableComponent implements OnInit, OnChanges {
diff --git a/components/date-picker/lib/decade/decade-panel.component.ts b/components/date-picker/lib/decade/decade-panel.component.ts
index 4571c72b377..5279a3d7c0e 100644
--- a/components/date-picker/lib/decade/decade-panel.component.ts
+++ b/components/date-picker/lib/decade/decade-panel.component.ts
@@ -20,6 +20,7 @@ const MAX_COL = 3;
   changeDetection: ChangeDetectionStrategy.OnPush,
   // tslint:disable-next-line:component-selector
   selector: 'decade-panel',
+  exportAs: 'decadePanel',
   templateUrl: 'decade-panel.component.html'
 })
 export class DecadePanelComponent implements OnChanges {
diff --git a/components/date-picker/lib/month/month-panel.component.ts b/components/date-picker/lib/month/month-panel.component.ts
index 65d0d8345b1..54c56c058f6 100644
--- a/components/date-picker/lib/month/month-panel.component.ts
+++ b/components/date-picker/lib/month/month-panel.component.ts
@@ -7,6 +7,7 @@ import { CandyDate } from '../candy-date';
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'month-panel', // tslint:disable-line:component-selector
+  exportAs: 'monthPanel',
   templateUrl: 'month-panel.component.html'
 })
 export class MonthPanelComponent {
diff --git a/components/date-picker/lib/month/month-table.component.ts b/components/date-picker/lib/month/month-table.component.ts
index d6f3f884d0f..321d6582733 100644
--- a/components/date-picker/lib/month/month-table.component.ts
+++ b/components/date-picker/lib/month/month-table.component.ts
@@ -21,6 +21,7 @@ const MAX_COL = 3;
   changeDetection: ChangeDetectionStrategy.OnPush,
   // tslint:disable-next-line:component-selector
   selector: 'month-table',
+  exportAs: 'monthTable',
   templateUrl: 'month-table.component.html'
 })
 export class MonthTableComponent implements OnInit, OnChanges {
diff --git a/components/date-picker/lib/popups/date-range-popup.component.ts b/components/date-picker/lib/popups/date-range-popup.component.ts
index 8556f7fb703..e999d725bfb 100644
--- a/components/date-picker/lib/popups/date-range-popup.component.ts
+++ b/components/date-picker/lib/popups/date-range-popup.component.ts
@@ -30,6 +30,7 @@ import { getTimeConfig, isAllowedDate } from '../util';
   changeDetection: ChangeDetectionStrategy.OnPush,
   // tslint:disable-next-line:component-selector
   selector: 'date-range-popup',
+  exportAs: 'dateRangePopup',
   templateUrl: 'date-range-popup.component.html'
 })
 export class DateRangePopupComponent implements OnInit, OnChanges {
diff --git a/components/date-picker/lib/popups/inner-popup.component.ts b/components/date-picker/lib/popups/inner-popup.component.ts
index 623ec5ab791..518d655faaa 100644
--- a/components/date-picker/lib/popups/inner-popup.component.ts
+++ b/components/date-picker/lib/popups/inner-popup.component.ts
@@ -21,6 +21,7 @@ import { CandyDate } from '../candy-date';
   changeDetection: ChangeDetectionStrategy.OnPush,
   // tslint:disable-next-line:component-selector
   selector: 'inner-popup',
+  exportAs: 'innerPopup',
   templateUrl: 'inner-popup.component.html'
 })
 export class InnerPopupComponent implements OnInit, OnChanges {
diff --git a/components/date-picker/lib/year/year-panel.component.ts b/components/date-picker/lib/year/year-panel.component.ts
index e014c90a9df..3ce1f1ec88c 100644
--- a/components/date-picker/lib/year/year-panel.component.ts
+++ b/components/date-picker/lib/year/year-panel.component.ts
@@ -20,6 +20,7 @@ const MAX_COL = 3;
   changeDetection: ChangeDetectionStrategy.OnPush,
   // tslint:disable-next-line:component-selector
   selector: 'year-panel',
+  exportAs: 'yearPanel',
   templateUrl: 'year-panel.component.html',
   styles: [
     // Support disabledDate
diff --git a/components/date-picker/month-picker.component.ts b/components/date-picker/month-picker.component.ts
index caaa109211b..3195ef89bad 100644
--- a/components/date-picker/month-picker.component.ts
+++ b/components/date-picker/month-picker.component.ts
@@ -22,6 +22,7 @@ import { HeaderPickerComponent, SupportHeaderPanel } from './header-picker.compo
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'nz-month-picker',
+  exportAs: 'nzMonthPicker',
   templateUrl: './header-picker.component.html',
   providers: [
     {
diff --git a/components/date-picker/picker.component.ts b/components/date-picker/picker.component.ts
index ec51a49aa9a..d5581b7efd4 100644
--- a/components/date-picker/picker.component.ts
+++ b/components/date-picker/picker.component.ts
@@ -25,6 +25,7 @@ import { CandyDate } from './lib/candy-date';
 @Component({
   encapsulation: ViewEncapsulation.None,
   selector: 'nz-picker',
+  exportAs: 'nzPicker',
   templateUrl: './picker.component.html',
   animations: [slideMotion],
   changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/components/date-picker/range-picker.component.ts b/components/date-picker/range-picker.component.ts
index e5d89371b5d..6bbc471f4a1 100644
--- a/components/date-picker/range-picker.component.ts
+++ b/components/date-picker/range-picker.component.ts
@@ -21,6 +21,7 @@ import { DateRangePickerComponent } from './date-range-picker.component';
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'nz-range-picker',
+  exportAs: 'nzRangePicker',
   templateUrl: './date-range-picker.component.html',
   providers: [
     {
diff --git a/components/date-picker/week-picker.component.ts b/components/date-picker/week-picker.component.ts
index b1958337e33..53724449d5b 100644
--- a/components/date-picker/week-picker.component.ts
+++ b/components/date-picker/week-picker.component.ts
@@ -21,6 +21,7 @@ import { DateRangePickerComponent } from './date-range-picker.component';
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'nz-week-picker',
+  exportAs: 'nzWeekPicker',
   templateUrl: './date-range-picker.component.html',
   providers: [
     {
diff --git a/components/date-picker/year-picker.component.ts b/components/date-picker/year-picker.component.ts
index 9502e0fe0bd..ba467872898 100644
--- a/components/date-picker/year-picker.component.ts
+++ b/components/date-picker/year-picker.component.ts
@@ -22,6 +22,7 @@ import { HeaderPickerComponent, SupportHeaderPanel } from './header-picker.compo
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'nz-year-picker',
+  exportAs: 'nzYearPicker',
   templateUrl: './header-picker.component.html',
   providers: [
     {
diff --git a/components/divider/nz-divider.component.ts b/components/divider/nz-divider.component.ts
index 182ab4c54e5..e0891c8a783 100644
--- a/components/divider/nz-divider.component.ts
+++ b/components/divider/nz-divider.component.ts
@@ -14,6 +14,7 @@ import { InputBoolean } from '../core/util';
 
 @Component({
   selector: 'nz-divider',
+  exportAs: 'nzDivider',
   templateUrl: './nz-divider.component.html',
   preserveWhitespaces: false,
   providers: [NzUpdateHostClassService],
diff --git a/components/drawer/nz-drawer.component.ts b/components/drawer/nz-drawer.component.ts
index c383e47d440..ebbcdf9dd30 100644
--- a/components/drawer/nz-drawer.component.ts
+++ b/components/drawer/nz-drawer.component.ts
@@ -35,6 +35,7 @@ export const DRAWER_ANIMATE_DURATION = 300;
 
 @Component({
   selector: 'nz-drawer',
+  exportAs: 'nzDrawer',
   templateUrl: './nz-drawer.component.html',
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/components/dropdown/nz-dropdown-button.component.ts b/components/dropdown/nz-dropdown-button.component.ts
index 381af5485fb..6d8381c43b6 100644
--- a/components/dropdown/nz-dropdown-button.component.ts
+++ b/components/dropdown/nz-dropdown-button.component.ts
@@ -22,6 +22,7 @@ import { NzMenuDropdownService } from './nz-menu-dropdown.service';
 
 @Component({
   selector: 'nz-dropdown-button',
+  exportAs: 'nzDropdownButton',
   preserveWhitespaces: false,
   animations: [slideMotion],
   encapsulation: ViewEncapsulation.None,
diff --git a/components/dropdown/nz-dropdown-context.component.ts b/components/dropdown/nz-dropdown-context.component.ts
index 938516c8c7e..80a8e3c19db 100644
--- a/components/dropdown/nz-dropdown-context.component.ts
+++ b/components/dropdown/nz-dropdown-context.component.ts
@@ -15,6 +15,7 @@ import { NzMenuDropdownService } from './nz-menu-dropdown.service';
 
 @Component({
   selector: 'nz-dropdown-context',
+  exportAs: 'nzDropdownContext',
   animations: [slideMotion],
   preserveWhitespaces: false,
   templateUrl: './nz-dropdown-context.component.html',
diff --git a/components/dropdown/nz-dropdown.component.ts b/components/dropdown/nz-dropdown.component.ts
index 4c1e3276835..5fc962ee307 100644
--- a/components/dropdown/nz-dropdown.component.ts
+++ b/components/dropdown/nz-dropdown.component.ts
@@ -30,6 +30,7 @@ export type NzPlacement = 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'topLe
 
 @Component({
   selector: 'nz-dropdown',
+  exportAs: 'nzDropdown',
   preserveWhitespaces: false,
   providers: [NzMenuDropdownService],
   animations: [slideMotion],
diff --git a/components/dropdown/nz-dropdown.directive.ts b/components/dropdown/nz-dropdown.directive.ts
index 59daec6dd30..cfc7479934f 100644
--- a/components/dropdown/nz-dropdown.directive.ts
+++ b/components/dropdown/nz-dropdown.directive.ts
@@ -3,7 +3,8 @@ import { fromEvent, merge, Observable } from 'rxjs';
 import { mapTo, tap } from 'rxjs/operators';
 
 @Directive({
-  selector: '[nz-dropdown]'
+  selector: '[nz-dropdown]',
+  exportAs: 'nzDropdown'
 })
 export class NzDropDownDirective {
   el: HTMLElement = this.elementRef.nativeElement;
diff --git a/components/empty/nz-embed-empty.component.ts b/components/empty/nz-embed-empty.component.ts
index ba1d4865897..e9bb27f916b 100644
--- a/components/empty/nz-embed-empty.component.ts
+++ b/components/empty/nz-embed-empty.component.ts
@@ -24,6 +24,7 @@ import { NzEmptyService } from './nz-empty.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   selector: 'nz-embed-empty',
+  exportAs: 'nzEmbedEmpty',
   templateUrl: './nz-embed-empty.component.html'
 })
 export class NzEmbedEmptyComponent implements OnChanges, OnInit, OnDestroy {
diff --git a/components/empty/nz-empty.component.ts b/components/empty/nz-empty.component.ts
index 37bf52ca09e..de3c73a7eae 100644
--- a/components/empty/nz-empty.component.ts
+++ b/components/empty/nz-empty.component.ts
@@ -21,6 +21,7 @@ import { emptyImage } from './nz-empty-config';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   selector: 'nz-empty',
+  exportAs: 'nzEmpty',
   templateUrl: './nz-empty.component.html',
   styles: ['nz-empty { display: block; }'],
   host: {
diff --git a/components/form/nz-form-control.component.ts b/components/form/nz-form-control.component.ts
index 5987e733268..864ec04aa14 100644
--- a/components/form/nz-form-control.component.ts
+++ b/components/form/nz-form-control.component.ts
@@ -26,6 +26,7 @@ import { NzFormItemComponent } from './nz-form-item.component';
 
 @Component({
   selector: 'nz-form-control',
+  exportAs: 'nzFormControl',
   preserveWhitespaces: false,
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/components/form/nz-form-explain.component.ts b/components/form/nz-form-explain.component.ts
index fe65352cb00..e3a6ffdcfec 100644
--- a/components/form/nz-form-explain.component.ts
+++ b/components/form/nz-form-explain.component.ts
@@ -3,6 +3,7 @@ import { helpMotion } from '../core/animation/help';
 
 @Component({
   selector: 'nz-form-explain',
+  exportAs: 'nzFormExplain',
   preserveWhitespaces: false,
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/components/form/nz-form-extra.component.ts b/components/form/nz-form-extra.component.ts
index 8e8e03741cf..ab19c123783 100644
--- a/components/form/nz-form-extra.component.ts
+++ b/components/form/nz-form-extra.component.ts
@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, ElementRef, Renderer2, ViewEncapsul
 
 @Component({
   selector: 'nz-form-extra',
+  exportAs: 'nzFormExtra',
   templateUrl: './nz-form-extra.component.html',
   preserveWhitespaces: false,
   encapsulation: ViewEncapsulation.None,
diff --git a/components/form/nz-form-item.component.ts b/components/form/nz-form-item.component.ts
index 80294cce2dc..febb38b7d25 100644
--- a/components/form/nz-form-item.component.ts
+++ b/components/form/nz-form-item.component.ts
@@ -23,6 +23,7 @@ import { NzFormExplainComponent } from './nz-form-explain.component';
 /** should add nz-row directive to host, track https://github.com/angular/angular/issues/8785 **/
 @Component({
   selector: 'nz-form-item',
+  exportAs: 'nzFormItem',
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
diff --git a/components/form/nz-form-label.component.ts b/components/form/nz-form-label.component.ts
index f5e4d7d24f6..592207b4d78 100644
--- a/components/form/nz-form-label.component.ts
+++ b/components/form/nz-form-label.component.ts
@@ -18,6 +18,7 @@ import { NzFormItemComponent } from './nz-form-item.component';
 
 @Component({
   selector: 'nz-form-label',
+  exportAs: 'nzFormLabel',
   providers: [NzUpdateHostClassService],
   preserveWhitespaces: false,
   encapsulation: ViewEncapsulation.None,
diff --git a/components/form/nz-form-split.component.ts b/components/form/nz-form-split.component.ts
index d927c515636..4cddad249c1 100644
--- a/components/form/nz-form-split.component.ts
+++ b/components/form/nz-form-split.component.ts
@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, ElementRef, Renderer2, ViewEncapsul
 
 @Component({
   selector: 'nz-form-split',
+  exportAs: 'nzFormSplit',
   preserveWhitespaces: false,
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/components/form/nz-form-text.component.ts b/components/form/nz-form-text.component.ts
index bdfa65b824e..4222554c9ac 100644
--- a/components/form/nz-form-text.component.ts
+++ b/components/form/nz-form-text.component.ts
@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, ElementRef, Renderer2, ViewEncapsul
 
 @Component({
   selector: 'nz-form-text',
+  exportAs: 'nzFormText',
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
diff --git a/components/form/nz-form.directive.ts b/components/form/nz-form.directive.ts
index d09a924b9eb..0aef8d0bdd8 100644
--- a/components/form/nz-form.directive.ts
+++ b/components/form/nz-form.directive.ts
@@ -3,6 +3,7 @@ import { NzUpdateHostClassService } from '../core/services/update-host-class.ser
 
 @Directive({
   selector: '[nz-form]',
+  exportAs: 'nzForm',
   providers: [NzUpdateHostClassService]
 })
 export class NzFormDirective implements OnInit, OnChanges {
diff --git a/components/grid/nz-col.directive.ts b/components/grid/nz-col.directive.ts
index a85fd08aa39..55f0e895007 100644
--- a/components/grid/nz-col.directive.ts
+++ b/components/grid/nz-col.directive.ts
@@ -29,6 +29,7 @@ export interface EmbeddedProperty {
 
 @Directive({
   selector: '[nz-col],nz-col',
+  exportAs: 'nzCol',
   providers: [NzUpdateHostClassService]
 })
 export class NzColDirective implements OnInit, OnChanges, AfterViewInit, OnDestroy {
diff --git a/components/grid/nz-row.directive.ts b/components/grid/nz-row.directive.ts
index da8f3a1392e..7331dd132b9 100644
--- a/components/grid/nz-row.directive.ts
+++ b/components/grid/nz-row.directive.ts
@@ -44,6 +44,7 @@ const responsiveMap: BreakpointMap = {
 
 @Directive({
   selector: '[nz-row],nz-row',
+  exportAs: 'nzRow',
   providers: [NzUpdateHostClassService]
 })
 export class NzRowDirective implements OnInit, OnChanges, AfterViewInit, OnDestroy {
diff --git a/components/icon/nz-icon.directive.ts b/components/icon/nz-icon.directive.ts
index a9400a07fc2..7d6d7da1256 100644
--- a/components/icon/nz-icon.directive.ts
+++ b/components/icon/nz-icon.directive.ts
@@ -52,7 +52,8 @@ const normalizeType = (rawType: string): { type: string; crossError: boolean; ve
  * - properties that not started with `nz`.
  */
 @Directive({
-  selector: 'i.anticon, [nz-icon]'
+  selector: 'i.anticon, [nz-icon]',
+  exportAs: 'nzIcon'
 })
 export class NzIconDirective extends IconDirective implements OnInit, OnChanges, OnDestroy, AfterContentChecked {
   /** Properties with `nz` prefix. */
diff --git a/components/input-number/nz-input-number.component.ts b/components/input-number/nz-input-number.component.ts
index 8d2e761c86a..d3aa81151f4 100644
--- a/components/input-number/nz-input-number.component.ts
+++ b/components/input-number/nz-input-number.component.ts
@@ -26,6 +26,7 @@ import { InputBoolean } from '../core/util/convert';
 
 @Component({
   selector: 'nz-input-number',
+  exportAs: 'nzInputNumber',
   templateUrl: './nz-input-number.component.html',
   providers: [
     {
diff --git a/components/input/nz-autosize.directive.ts b/components/input/nz-autosize.directive.ts
index 0892e7f5fc2..68d203c8cd8 100644
--- a/components/input/nz-autosize.directive.ts
+++ b/components/input/nz-autosize.directive.ts
@@ -14,6 +14,7 @@ export function isAutoSizeType(value: string | boolean | AutoSizeType): value is
 
 @Directive({
   selector: 'textarea[nzAutosize]',
+  exportAs: 'nzAutosize',
   host: {
     // Textarea elements that have the directive applied should have a single row by default.
     // Browsers normally show two rows by default and therefore this limits the minRows binding.
diff --git a/components/input/nz-input-group.component.ts b/components/input/nz-input-group.component.ts
index c07fae71152..82c2040b0b3 100644
--- a/components/input/nz-input-group.component.ts
+++ b/components/input/nz-input-group.component.ts
@@ -15,6 +15,7 @@ import { NzInputDirective } from './nz-input.directive';
 
 @Component({
   selector: 'nz-input-group',
+  exportAs: 'nzInputGroup',
   preserveWhitespaces: false,
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/components/input/nz-input.directive.ts b/components/input/nz-input.directive.ts
index 27bc1dc1522..c95f4bb800b 100644
--- a/components/input/nz-input.directive.ts
+++ b/components/input/nz-input.directive.ts
@@ -5,6 +5,7 @@ import { toBoolean } from '../core/util/convert';
 
 @Directive({
   selector: '[nz-input]',
+  exportAs: 'nzInput',
   host: {
     '[class.ant-input-disabled]': 'disabled',
     '[class.ant-input-lg]': `nzSize === 'large'`,
diff --git a/components/layout/nz-content.component.ts b/components/layout/nz-content.component.ts
index c46be94df7f..30f94bf482a 100644
--- a/components/layout/nz-content.component.ts
+++ b/components/layout/nz-content.component.ts
@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, ElementRef, Renderer2, ViewEncapsul
 
 @Component({
   selector: 'nz-content',
+  exportAs: 'nzContent',
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
diff --git a/components/layout/nz-footer.component.ts b/components/layout/nz-footer.component.ts
index 0a825ebe087..0c19cf8090c 100644
--- a/components/layout/nz-footer.component.ts
+++ b/components/layout/nz-footer.component.ts
@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, ElementRef, Renderer2, ViewEncapsul
 
 @Component({
   selector: 'nz-footer',
+  exportAs: 'nzFooter',
   preserveWhitespaces: false,
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/components/layout/nz-header.component.ts b/components/layout/nz-header.component.ts
index 0aa693976a9..c2094dd99ce 100644
--- a/components/layout/nz-header.component.ts
+++ b/components/layout/nz-header.component.ts
@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, ElementRef, Renderer2, ViewEncapsul
 
 @Component({
   selector: 'nz-header',
+  exportAs: 'nzHeader',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
diff --git a/components/layout/nz-layout.component.ts b/components/layout/nz-layout.component.ts
index 70750ed6522..133d9c4a5b1 100644
--- a/components/layout/nz-layout.component.ts
+++ b/components/layout/nz-layout.component.ts
@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, ElementRef, Renderer2, ViewEncapsul
 
 @Component({
   selector: 'nz-layout',
+  exportAs: 'nzLayout',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   preserveWhitespaces: false,
diff --git a/components/layout/nz-sider.component.ts b/components/layout/nz-sider.component.ts
index 7f4f06b88ba..be68f9778ac 100644
--- a/components/layout/nz-sider.component.ts
+++ b/components/layout/nz-sider.component.ts
@@ -29,6 +29,7 @@ export type NzBreakPoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 
 @Component({
   selector: 'nz-sider',
+  exportAs: 'nzSider',
   preserveWhitespaces: false,
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/components/list/nz-list-item-meta.component.ts b/components/list/nz-list-item-meta.component.ts
index e1c50ee6b90..40c91dce1ae 100644
--- a/components/list/nz-list-item-meta.component.ts
+++ b/components/list/nz-list-item-meta.component.ts
@@ -10,6 +10,7 @@ import {
 
 @Component({
   selector: 'nz-list-item-meta',
+  exportAs: 'nzListItemMeta',
   templateUrl: './nz-list-item-meta.component.html',
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/components/list/nz-list-item.component.ts b/components/list/nz-list-item.component.ts
index 82eef345bd9..d317df96336 100644
--- a/components/list/nz-list-item.component.ts
+++ b/components/list/nz-list-item.component.ts
@@ -14,6 +14,7 @@ import { NzListItemMetaComponent } from './nz-list-item-meta.component';
 
 @Component({
   selector: 'nz-list-item',
+  exportAs: 'nzListItem',
   templateUrl: './nz-list-item.component.html',
   preserveWhitespaces: false,
   encapsulation: ViewEncapsulation.None,
diff --git a/components/list/nz-list.component.ts b/components/list/nz-list.component.ts
index 848cb41dc48..3e8cdddb719 100644
--- a/components/list/nz-list.component.ts
+++ b/components/list/nz-list.component.ts
@@ -17,6 +17,7 @@ import { NzListGrid } from './interface';
 
 @Component({
   selector: 'nz-list',
+  exportAs: 'nzList',
   templateUrl: './nz-list.component.html',
   providers: [NzUpdateHostClassService],
   preserveWhitespaces: false,
diff --git a/components/mention/nz-mention-suggestions.ts b/components/mention/nz-mention-suggestions.ts
index 9b9426f7f42..6f4878a99d5 100644
--- a/components/mention/nz-mention-suggestions.ts
+++ b/components/mention/nz-mention-suggestions.ts
@@ -1,6 +1,7 @@
 import { Directive } from '@angular/core';
 
 @Directive({
-  selector: '[nzMentionSuggestion]'
+  selector: '[nzMentionSuggestion]',
+  exportAs: 'nzMentionSuggestion'
 })
 export class NzMentionSuggestionDirective {}
diff --git a/components/mention/nz-mention-trigger.ts b/components/mention/nz-mention-trigger.ts
index aed013a1723..6489247e7e3 100644
--- a/components/mention/nz-mention-trigger.ts
+++ b/components/mention/nz-mention-trigger.ts
@@ -11,6 +11,7 @@ export const NZ_MENTION_TRIGGER_ACCESSOR: ExistingProvider = {
 
 @Directive({
   selector: 'input[nzMentionTrigger], textarea[nzMentionTrigger]',
+  exportAs: 'nzMentionTrigger',
   providers: [NZ_MENTION_TRIGGER_ACCESSOR],
   host: {
     autocomplete: 'off',
diff --git a/components/mention/nz-mention.component.ts b/components/mention/nz-mention.component.ts
index c08294bdb09..220d9986bc5 100644
--- a/components/mention/nz-mention.component.ts
+++ b/components/mention/nz-mention.component.ts
@@ -53,6 +53,7 @@ export type MentionPlacement = 'top' | 'bottom';
 
 @Component({
   selector: 'nz-mention',
+  exportAs: 'nzMention',
   templateUrl: './nz-mention.component.html',
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/components/menu/nz-menu-divider.directive.ts b/components/menu/nz-menu-divider.directive.ts
index 13b784d9247..8a0221adf21 100644
--- a/components/menu/nz-menu-divider.directive.ts
+++ b/components/menu/nz-menu-divider.directive.ts
@@ -1,7 +1,8 @@
 import { Directive, ElementRef, Renderer2 } from '@angular/core';
 
 @Directive({
-  selector: '[nz-menu-divider]'
+  selector: '[nz-menu-divider]',
+  exportAs: 'nzMenuDivider'
 })
 export class NzMenuDividerDirective {
   constructor(public elementRef: ElementRef, private renderer: Renderer2) {
diff --git a/components/menu/nz-menu-group.component.ts b/components/menu/nz-menu-group.component.ts
index f669d8b150b..6c4c12a919d 100644
--- a/components/menu/nz-menu-group.component.ts
+++ b/components/menu/nz-menu-group.component.ts
@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, ElementRef, Renderer2, ViewEncapsul
 
 @Component({
   selector: '[nz-menu-group]',
+  exportAs: 'nzMenuGroup',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   templateUrl: './nz-menu-group.component.html',
diff --git a/components/menu/nz-menu-item.directive.ts b/components/menu/nz-menu-item.directive.ts
index a325639cb0d..1b69187b10a 100644
--- a/components/menu/nz-menu-item.directive.ts
+++ b/components/menu/nz-menu-item.directive.ts
@@ -20,6 +20,7 @@ import { NzSubmenuService } from './nz-submenu.service';
 
 @Directive({
   selector: '[nz-menu-item]',
+  exportAs: 'nzMenuItem',
   providers: [NzUpdateHostClassService],
   host: {
     '(click)': 'clickMenuItem($event)'
diff --git a/components/menu/nz-menu.directive.ts b/components/menu/nz-menu.directive.ts
index 4cedadad1b7..76982058822 100644
--- a/components/menu/nz-menu.directive.ts
+++ b/components/menu/nz-menu.directive.ts
@@ -31,6 +31,7 @@ export function NzMenuFactory(dropService: NzMenuDropdownService, menuService: N
 
 @Directive({
   selector: '[nz-menu]',
+  exportAs: 'nzMenu',
   providers: [
     NzUpdateHostClassService,
     NzMenuMenuService,
diff --git a/components/menu/nz-submenu.component.ts b/components/menu/nz-submenu.component.ts
index b37e2b24399..8123d0f7048 100644
--- a/components/menu/nz-submenu.component.ts
+++ b/components/menu/nz-submenu.component.ts
@@ -35,6 +35,7 @@ import { NzSubmenuService } from './nz-submenu.service';
 
 @Component({
   selector: '[nz-submenu]',
+  exportAs: 'nzSubmenu',
   providers: [NzSubmenuService, NzUpdateHostClassService],
   animations: [collapseMotion, zoomBigMotion, slideMotion],
   encapsulation: ViewEncapsulation.None,
diff --git a/components/message/nz-message-container.component.ts b/components/message/nz-message-container.component.ts
index 11d9003dbec..429cc31b559 100644
--- a/components/message/nz-message-container.component.ts
+++ b/components/message/nz-message-container.component.ts
@@ -17,6 +17,7 @@ import { NzMessageDataFilled, NzMessageDataOptions } from './nz-message.definiti
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   selector: 'nz-message-container',
+  exportAs: 'nzMessageContainer',
   preserveWhitespaces: false,
   templateUrl: './nz-message-container.component.html'
 })
diff --git a/components/message/nz-message.component.ts b/components/message/nz-message.component.ts
index 42cc03d4ab7..7713386d7ce 100644
--- a/components/message/nz-message.component.ts
+++ b/components/message/nz-message.component.ts
@@ -15,6 +15,7 @@ import { NzMessageDataFilled, NzMessageDataOptions } from './nz-message.definiti
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   selector: 'nz-message',
+  exportAs: 'nzMessage',
   preserveWhitespaces: false,
   animations: [moveUpMotion],
   templateUrl: './nz-message.component.html'
diff --git a/components/modal/nz-modal.component.ts b/components/modal/nz-modal.component.ts
index b8f63e40a66..5705650da7b 100644
--- a/components/modal/nz-modal.component.ts
+++ b/components/modal/nz-modal.component.ts
@@ -45,6 +45,7 @@ type AnimationState = 'enter' | 'leave' | null;
 
 @Component({
   selector: 'nz-modal',
+  exportAs: 'nzModal',
   templateUrl: './nz-modal.component.html',
   // Using OnPush for modal caused footer can not to detect changes. we can fix it when 8.x.
   changeDetection: ChangeDetectionStrategy.Default
diff --git a/components/notification/nz-notification-container.component.ts b/components/notification/nz-notification-container.component.ts
index 15c30cef08a..1afdfb157b1 100644
--- a/components/notification/nz-notification-container.component.ts
+++ b/components/notification/nz-notification-container.component.ts
@@ -18,6 +18,7 @@ import { NzNotificationDataFilled, NzNotificationDataOptions } from './nz-notifi
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   selector: 'nz-notification-container',
+  exportAs: 'nzNotificationContainer',
   preserveWhitespaces: false,
   templateUrl: './nz-notification-container.component.html'
 })
diff --git a/components/notification/nz-notification.component.ts b/components/notification/nz-notification.component.ts
index 50ef9c5404d..618a234c793 100644
--- a/components/notification/nz-notification.component.ts
+++ b/components/notification/nz-notification.component.ts
@@ -9,6 +9,7 @@ import { NzNotificationDataFilled } from './nz-notification.definitions';
 @Component({
   encapsulation: ViewEncapsulation.None,
   selector: 'nz-notification',
+  exportAs: 'nzNotification',
   preserveWhitespaces: false,
   animations: [notificationMotion],
   templateUrl: './nz-notification.component.html'
diff --git a/components/page-header/nz-page-header-cells.ts b/components/page-header/nz-page-header-cells.ts
index 16bdf2fcff4..4beb8be8cdc 100644
--- a/components/page-header/nz-page-header-cells.ts
+++ b/components/page-header/nz-page-header-cells.ts
@@ -2,6 +2,7 @@ import { Directive } from '@angular/core';
 
 @Directive({
   selector: 'nz-page-header-title, [nz-page-header-title]',
+  exportAs: 'nzPageHeaderTitle',
   host: {
     class: 'ant-page-header-title-view-title'
   }
@@ -10,6 +11,7 @@ export class NzPageHeaderTitleDirective {}
 
 @Directive({
   selector: 'nz-page-header-subtitle, [nz-page-header-subtitle]',
+  exportAs: 'nzPageHeaderSubtitle',
   host: {
     class: 'ant-page-header-title-view-sub-title'
   }
@@ -18,6 +20,7 @@ export class NzPageHeaderSubtitleDirective {}
 
 @Directive({
   selector: 'nz-page-header-content, [nz-page-header-content]',
+  exportAs: 'nzPageHeaderContent',
   host: {
     class: 'ant-page-header-content-view'
   }
@@ -26,6 +29,7 @@ export class NzPageHeaderContentDirective {}
 
 @Directive({
   selector: 'nz-page-header-tags, [nz-page-header-tags]',
+  exportAs: 'nzPageHeaderTags',
   host: {
     class: 'ant-page-header-title-view-tags'
   }
@@ -34,6 +38,7 @@ export class NzPageHeaderTagDirective {}
 
 @Directive({
   selector: 'nz-page-header-extra, [nz-page-header-extra]',
+  exportAs: 'nzPageHeaderExtra',
   host: {
     class: 'ant-page-header-title-view-extra'
   }
@@ -42,6 +47,7 @@ export class NzPageHeaderExtraDirective {}
 
 @Directive({
   selector: 'nz-page-header-footer, [nz-page-header-footer]',
+  exportAs: 'nzPageHeaderFooter',
   host: {
     class: 'ant-page-header-footer'
   }
@@ -49,6 +55,7 @@ export class NzPageHeaderExtraDirective {}
 export class NzPageHeaderFooterDirective {}
 
 @Directive({
-  selector: 'nz-breadcrumb[nz-page-header-breadcrumb]'
+  selector: 'nz-breadcrumb[nz-page-header-breadcrumb]',
+  exportAs: 'nzPageHeaderBreadcrumb'
 })
 export class NzPageHeaderBreadcrumbDirective {}
diff --git a/components/page-header/nz-page-header.component.ts b/components/page-header/nz-page-header.component.ts
index 91631f0a828..1550f7034ae 100644
--- a/components/page-header/nz-page-header.component.ts
+++ b/components/page-header/nz-page-header.component.ts
@@ -16,6 +16,7 @@ import { NzPageHeaderFooterDirective } from './nz-page-header-cells';
 
 @Component({
   selector: 'nz-page-header',
+  exportAs: 'nzPageHeader',
   templateUrl: './nz-page-header.component.html',
   styleUrls: ['./nz-page-header.component.less'],
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/components/pagination/nz-pagination.component.ts b/components/pagination/nz-pagination.component.ts
index 58e83ff7bc2..87de4608fe3 100644
--- a/components/pagination/nz-pagination.component.ts
+++ b/components/pagination/nz-pagination.component.ts
@@ -21,6 +21,7 @@ import { NzI18nService } from '../i18n/nz-i18n.service';
 
 @Component({
   selector: 'nz-pagination',
+  exportAs: 'nzPagination',
   preserveWhitespaces: false,
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/components/popconfirm/nz-popconfirm.component.ts b/components/popconfirm/nz-popconfirm.component.ts
index 7fdbc300060..95311b0943d 100644
--- a/components/popconfirm/nz-popconfirm.component.ts
+++ b/components/popconfirm/nz-popconfirm.component.ts
@@ -19,6 +19,7 @@ import { NzToolTipComponent } from '../tooltip/nz-tooltip.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   selector: 'nz-popconfirm',
+  exportAs: 'nzPopconfirmComponent',
   preserveWhitespaces: false,
   animations: [zoomBigMotion],
   templateUrl: './nz-popconfirm.component.html',
diff --git a/components/popconfirm/nz-popconfirm.directive.ts b/components/popconfirm/nz-popconfirm.directive.ts
index a8397ef52ee..d7163754864 100644
--- a/components/popconfirm/nz-popconfirm.directive.ts
+++ b/components/popconfirm/nz-popconfirm.directive.ts
@@ -23,6 +23,7 @@ import { NzPopconfirmComponent } from './nz-popconfirm.component';
 
 @Directive({
   selector: '[nz-popconfirm]',
+  exportAs: 'nzPopconfirm',
   host: {
     '[class.ant-popover-open]': 'isTooltipOpen'
   }
diff --git a/components/popover/nz-popover.component.ts b/components/popover/nz-popover.component.ts
index a988c740eab..8d2fb37c27c 100644
--- a/components/popover/nz-popover.component.ts
+++ b/components/popover/nz-popover.component.ts
@@ -17,6 +17,7 @@ import { NzToolTipComponent } from '../tooltip/nz-tooltip.component';
 
 @Component({
   selector: 'nz-popover',
+  exportAs: 'nzPopoverComponent',
   animations: [zoomBigMotion],
   templateUrl: './nz-popover.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/components/popover/nz-popover.directive.ts b/components/popover/nz-popover.directive.ts
index 851b028c2c5..df68c16a0d0 100644
--- a/components/popover/nz-popover.directive.ts
+++ b/components/popover/nz-popover.directive.ts
@@ -15,6 +15,7 @@ import { NzPopoverComponent } from './nz-popover.component';
 
 @Directive({
   selector: '[nz-popover]',
+  exportAs: 'nzPopover',
   host: {
     '[class.ant-popover-open]': 'isTooltipOpen'
   }
diff --git a/components/progress/nz-progress.component.ts b/components/progress/nz-progress.component.ts
index 6e8de043d3c..3ac54537a31 100644
--- a/components/progress/nz-progress.component.ts
+++ b/components/progress/nz-progress.component.ts
@@ -20,6 +20,7 @@ export type NzProgressStrokeLinecapType = 'round' | 'square';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   selector: 'nz-progress',
+  exportAs: 'nzProgress',
   preserveWhitespaces: false,
   templateUrl: './nz-progress.component.html'
 })
diff --git a/components/radio/nz-radio-button.component.ts b/components/radio/nz-radio-button.component.ts
index 0ab2a63ea42..5b1d9bb3af2 100644
--- a/components/radio/nz-radio-button.component.ts
+++ b/components/radio/nz-radio-button.component.ts
@@ -14,6 +14,7 @@ import { NzRadioComponent } from './nz-radio.component';
 
 @Component({
   selector: '[nz-radio-button]',
+  exportAs: 'nzRadioButton',
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
diff --git a/components/radio/nz-radio-group.component.ts b/components/radio/nz-radio-group.component.ts
index 11c9cc2eb1d..fd5b48faeed 100644
--- a/components/radio/nz-radio-group.component.ts
+++ b/components/radio/nz-radio-group.component.ts
@@ -26,6 +26,7 @@ export type NzRadioButtonStyle = 'outline' | 'solid';
 
 @Component({
   selector: 'nz-radio-group',
+  exportAs: 'nzRadioGroup',
   preserveWhitespaces: false,
   templateUrl: './nz-radio-group.component.html',
   encapsulation: ViewEncapsulation.None,
diff --git a/components/radio/nz-radio.component.ts b/components/radio/nz-radio.component.ts
index 042293ff3f3..55c424289b9 100644
--- a/components/radio/nz-radio.component.ts
+++ b/components/radio/nz-radio.component.ts
@@ -20,6 +20,7 @@ import { InputBoolean } from '../core/util/convert';
 
 @Component({
   selector: '[nz-radio]',
+  exportAs: 'nzRadio',
   preserveWhitespaces: false,
   templateUrl: './nz-radio.component.html',
   encapsulation: ViewEncapsulation.None,
diff --git a/components/rate/nz-rate-item.component.ts b/components/rate/nz-rate-item.component.ts
index 4cac960900c..d21864315ae 100644
--- a/components/rate/nz-rate-item.component.ts
+++ b/components/rate/nz-rate-item.component.ts
@@ -13,6 +13,7 @@ import { InputBoolean } from '../core/util';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   selector: '[nz-rate-item]',
+  exportAs: 'nzRateItem',
   templateUrl: './nz-rate-item.component.html'
 })
 export class NzRateItemComponent {
diff --git a/components/rate/nz-rate.component.ts b/components/rate/nz-rate.component.ts
index 3e22735eb7b..c8a66d0b9a4 100644
--- a/components/rate/nz-rate.component.ts
+++ b/components/rate/nz-rate.component.ts
@@ -26,6 +26,7 @@ import { InputBoolean } from '../core/util/convert';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   selector: 'nz-rate',
+  exportAs: 'nzRate',
   preserveWhitespaces: false,
   templateUrl: './nz-rate.component.html',
   providers: [
diff --git a/components/select/nz-option-container.component.ts b/components/select/nz-option-container.component.ts
index 1da854c1539..aa121fc1eea 100644
--- a/components/select/nz-option-container.component.ts
+++ b/components/select/nz-option-container.component.ts
@@ -24,6 +24,7 @@ import { NzSelectService } from './nz-select.service';
 
 @Component({
   selector: '[nz-option-container]',
+  exportAs: 'nzOptionContainer',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
diff --git a/components/select/nz-option-group.component.ts b/components/select/nz-option-group.component.ts
index 7653e3b604c..32b439d9696 100644
--- a/components/select/nz-option-group.component.ts
+++ b/components/select/nz-option-group.component.ts
@@ -11,6 +11,7 @@ import { NzOptionComponent } from './nz-option.component';
 
 @Component({
   selector: 'nz-option-group',
+  exportAs: 'nzOptionGroup',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './nz-option-group.component.html'
diff --git a/components/select/nz-option-li.component.ts b/components/select/nz-option-li.component.ts
index 9461608b152..cb7c8481967 100644
--- a/components/select/nz-option-li.component.ts
+++ b/components/select/nz-option-li.component.ts
@@ -18,6 +18,7 @@ import { NzSelectService } from './nz-select.service';
 
 @Component({
   selector: '[nz-option-li]',
+  exportAs: 'nzOptionLi',
   templateUrl: './nz-option-li.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
diff --git a/components/select/nz-option.component.ts b/components/select/nz-option.component.ts
index d3b7d0997d2..622d24e53b9 100644
--- a/components/select/nz-option.component.ts
+++ b/components/select/nz-option.component.ts
@@ -4,6 +4,7 @@ import { InputBoolean } from '../core/util/convert';
 
 @Component({
   selector: 'nz-option',
+  exportAs: 'nzOption',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './nz-option.component.html'
diff --git a/components/select/nz-select-top-control.component.ts b/components/select/nz-select-top-control.component.ts
index da71c1a13b5..82c482ec8dc 100644
--- a/components/select/nz-select-top-control.component.ts
+++ b/components/select/nz-select-top-control.component.ts
@@ -22,6 +22,7 @@ import { NzSelectService } from './nz-select.service';
 
 @Component({
   selector: '[nz-select-top-control]',
+  exportAs: 'nzSelectTopControl',
   preserveWhitespaces: false,
   animations: [zoomMotion],
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/components/select/nz-select-unselectable.directive.ts b/components/select/nz-select-unselectable.directive.ts
index fbbc434355c..e9b76e5bcd4 100644
--- a/components/select/nz-select-unselectable.directive.ts
+++ b/components/select/nz-select-unselectable.directive.ts
@@ -2,6 +2,7 @@ import { Directive } from '@angular/core';
 
 @Directive({
   selector: '[nz-select-unselectable]',
+  exportAs: 'nzSelectUnselectable',
   host: {
     '[attr.unselectable]': '"unselectable"',
     '[style.user-select]': '"none"'
diff --git a/components/select/nz-select.component.ts b/components/select/nz-select.component.ts
index fa134c83924..442f556c954 100644
--- a/components/select/nz-select.component.ts
+++ b/components/select/nz-select.component.ts
@@ -38,6 +38,7 @@ import { NzSelectService } from './nz-select.service';
 
 @Component({
   selector: 'nz-select',
+  exportAs: 'nzSelect',
   preserveWhitespaces: false,
   providers: [
     NzSelectService,
diff --git a/components/skeleton/nz-skeleton.component.ts b/components/skeleton/nz-skeleton.component.ts
index 49d4d3fe4f7..98bee9cb2c9 100644
--- a/components/skeleton/nz-skeleton.component.ts
+++ b/components/skeleton/nz-skeleton.component.ts
@@ -18,6 +18,7 @@ import { AvatarShape, AvatarSize, NzSkeletonAvatar, NzSkeletonParagraph, NzSkele
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   selector: 'nz-skeleton',
+  exportAs: 'nzSkeleton',
   templateUrl: './nz-skeleton.component.html',
   host: {
     '[class.ant-skeleton-with-avatar]': '!!nzAvatar',
diff --git a/components/slider/nz-slider-handle.component.ts b/components/slider/nz-slider-handle.component.ts
index e062f82769b..20f21d6b0bd 100644
--- a/components/slider/nz-slider-handle.component.ts
+++ b/components/slider/nz-slider-handle.component.ts
@@ -22,6 +22,7 @@ import { NzSliderComponent } from './nz-slider.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   selector: 'nz-slider-handle',
+  exportAs: 'nzSliderHandle',
   preserveWhitespaces: false,
   templateUrl: './nz-slider-handle.component.html',
   host: {
diff --git a/components/slider/nz-slider-marks.component.ts b/components/slider/nz-slider-marks.component.ts
index a09a8aa031c..8f887fdfaf9 100644
--- a/components/slider/nz-slider-marks.component.ts
+++ b/components/slider/nz-slider-marks.component.ts
@@ -9,6 +9,7 @@ import { isConfigAObject, DisplayedMark, ExtendedMark, Mark } from './nz-slider-
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
   selector: 'nz-slider-marks',
+  exportAs: 'nzSliderMarks',
   templateUrl: './nz-slider-marks.component.html'
 })
 export class NzSliderMarksComponent implements OnChanges {
diff --git a/components/slider/nz-slider-step.component.ts b/components/slider/nz-slider-step.component.ts
index 001d7703d41..e07a468e1a6 100644
--- a/components/slider/nz-slider-step.component.ts
+++ b/components/slider/nz-slider-step.component.ts
@@ -8,6 +8,7 @@ import { DisplayedStep, ExtendedMark } from './nz-slider-definitions';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   selector: 'nz-slider-step',
+  exportAs: 'nzSliderStep',
   preserveWhitespaces: false,
   templateUrl: './nz-slider-step.component.html'
 })
diff --git a/components/slider/nz-slider-track.component.ts b/components/slider/nz-slider-track.component.ts
index 232796bad99..ec26743679b 100644
--- a/components/slider/nz-slider-track.component.ts
+++ b/components/slider/nz-slider-track.component.ts
@@ -14,6 +14,7 @@ export interface NzSliderTrackStyle {
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   selector: 'nz-slider-track',
+  exportAs: 'nzSliderTrack',
   preserveWhitespaces: false,
   templateUrl: './nz-slider-track.component.html'
 })
diff --git a/components/slider/nz-slider.component.ts b/components/slider/nz-slider.component.ts
index 69e567b8382..7906bba62b4 100644
--- a/components/slider/nz-slider.component.ts
+++ b/components/slider/nz-slider.component.ts
@@ -38,6 +38,7 @@ import { getValueTypeNotMatchError } from './nz-slider-error';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   selector: 'nz-slider',
+  exportAs: 'nzSlider',
   preserveWhitespaces: false,
   providers: [
     {
diff --git a/components/spin/nz-spin.component.ts b/components/spin/nz-spin.component.ts
index d24d2931e07..652450015bd 100644
--- a/components/spin/nz-spin.component.ts
+++ b/components/spin/nz-spin.component.ts
@@ -18,6 +18,7 @@ import { InputBoolean, InputNumber } from '../core/util/convert';
 
 @Component({
   selector: 'nz-spin',
+  exportAs: 'nzSpin',
   preserveWhitespaces: false,
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/components/statistic/nz-countdown.component.ts b/components/statistic/nz-countdown.component.ts
index a485a94e3e8..8fa0e77dcb7 100644
--- a/components/statistic/nz-countdown.component.ts
+++ b/components/statistic/nz-countdown.component.ts
@@ -19,6 +19,7 @@ import { NzStatisticComponent } from './nz-statistic.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   selector: 'nz-countdown',
+  exportAs: 'nzCountdown',
   templateUrl: './nz-countdown.component.html'
 })
 export class NzCountdownComponent extends NzStatisticComponent implements OnInit, OnChanges, OnDestroy {
diff --git a/components/statistic/nz-statistic-number.component.ts b/components/statistic/nz-statistic-number.component.ts
index 5d3a412ad83..dde1dd17f44 100644
--- a/components/statistic/nz-statistic-number.component.ts
+++ b/components/statistic/nz-statistic-number.component.ts
@@ -16,6 +16,7 @@ import { NzStatisticValueType } from './nz-statistic-definitions';
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
   selector: 'nz-statistic-number',
+  exportAs: 'nzStatisticNumber',
   templateUrl: './nz-statistic-number.component.html',
   host: {
     class: 'ant-statistic-content-value'
diff --git a/components/statistic/nz-statistic.component.ts b/components/statistic/nz-statistic.component.ts
index 01b7922b85a..16e0c1d9687 100644
--- a/components/statistic/nz-statistic.component.ts
+++ b/components/statistic/nz-statistic.component.ts
@@ -5,6 +5,7 @@ import { NzStatisticValueType } from './nz-statistic-definitions';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   selector: 'nz-statistic',
+  exportAs: 'nzStatistic',
   templateUrl: './nz-statistic.component.html',
   host: {
     class: 'ant-statistic'
diff --git a/components/steps/nz-step.component.ts b/components/steps/nz-step.component.ts
index 2101de68005..d468e8bd280 100644
--- a/components/steps/nz-step.component.ts
+++ b/components/steps/nz-step.component.ts
@@ -16,6 +16,7 @@ import { NgClassType } from '../core/types/ng-class';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   selector: 'nz-step',
+  exportAs: 'nzStep',
   preserveWhitespaces: false,
   templateUrl: './nz-step.component.html',
   host: {
diff --git a/components/steps/nz-steps.component.ts b/components/steps/nz-steps.component.ts
index 44af336e36c..50a5f2e106a 100644
--- a/components/steps/nz-steps.component.ts
+++ b/components/steps/nz-steps.component.ts
@@ -29,6 +29,7 @@ export type NzStatusType = 'wait' | 'process' | 'finish' | 'error';
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
   selector: 'nz-steps',
+  exportAs: 'nzSteps',
   templateUrl: './nz-steps.component.html'
 })
 export class NzStepsComponent implements OnChanges, OnInit, OnDestroy, AfterContentInit {
diff --git a/components/switch/nz-switch.component.ts b/components/switch/nz-switch.component.ts
index a3539c272e8..1d1f83591d8 100644
--- a/components/switch/nz-switch.component.ts
+++ b/components/switch/nz-switch.component.ts
@@ -19,6 +19,7 @@ import { InputBoolean } from '../core/util/convert';
 
 @Component({
   selector: 'nz-switch',
+  exportAs: 'nzSwitch',
   preserveWhitespaces: false,
   templateUrl: './nz-switch.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/components/table/nz-table.component.ts b/components/table/nz-table.component.ts
index 251f4d61c66..5c5c80f91d9 100644
--- a/components/table/nz-table.component.ts
+++ b/components/table/nz-table.component.ts
@@ -34,6 +34,7 @@ import { NzVirtualScrollDirective } from './nz-virtual-scroll.directive';
 
 @Component({
   selector: 'nz-table',
+  exportAs: 'nzTable',
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
diff --git a/components/table/nz-virtual-scroll.directive.ts b/components/table/nz-virtual-scroll.directive.ts
index 445b139765c..eec2aae3284 100644
--- a/components/table/nz-virtual-scroll.directive.ts
+++ b/components/table/nz-virtual-scroll.directive.ts
@@ -1,7 +1,8 @@
 import { Directive, TemplateRef } from '@angular/core';
 
 @Directive({
-  selector: '[nz-virtual-scroll]'
+  selector: '[nz-virtual-scroll]',
+  exportAs: 'nzVirtualScroll'
 })
 export class NzVirtualScrollDirective {
   /* tslint:disable-next-line:no-any */
diff --git a/components/tabs/nz-tab-body.component.ts b/components/tabs/nz-tab-body.component.ts
index 913ebeb2ddc..69f88b3a6f4 100644
--- a/components/tabs/nz-tab-body.component.ts
+++ b/components/tabs/nz-tab-body.component.ts
@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulati
 
 @Component({
   selector: '[nz-tab-body]',
+  exportAs: 'nzTabBody',
   preserveWhitespaces: false,
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/components/tabs/nz-tab-label.directive.ts b/components/tabs/nz-tab-label.directive.ts
index 6030553e292..a626b2c0a22 100644
--- a/components/tabs/nz-tab-label.directive.ts
+++ b/components/tabs/nz-tab-label.directive.ts
@@ -4,6 +4,7 @@ import { InputBoolean } from '../core/util/convert';
 
 @Directive({
   selector: '[nz-tab-label]',
+  exportAs: 'nzTabLabel',
   host: {
     '[class.ant-tabs-tab-disabled]': 'disabled'
   }
diff --git a/components/tabs/nz-tab.component.ts b/components/tabs/nz-tab.component.ts
index 92cac2add07..7cb48dff057 100644
--- a/components/tabs/nz-tab.component.ts
+++ b/components/tabs/nz-tab.component.ts
@@ -21,6 +21,7 @@ import { NzTabDirective } from './nz-tab.directive';
 
 @Component({
   selector: 'nz-tab',
+  exportAs: 'nzTab',
   preserveWhitespaces: false,
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/components/tabs/nz-tab.directive.ts b/components/tabs/nz-tab.directive.ts
index 9f162503d98..674fdb57b7d 100644
--- a/components/tabs/nz-tab.directive.ts
+++ b/components/tabs/nz-tab.directive.ts
@@ -2,6 +2,7 @@ import { Directive } from '@angular/core';
 
 /** Decorates the `ng-template` tags and reads out the template from it. */
 @Directive({
-  selector: '[nz-tab]'
+  selector: '[nz-tab]',
+  exportAs: 'nzTab'
 })
 export class NzTabDirective {}
diff --git a/components/tabs/nz-tabs-ink-bar.directive.ts b/components/tabs/nz-tabs-ink-bar.directive.ts
index e1a74696960..f1a8d3a9703 100755
--- a/components/tabs/nz-tabs-ink-bar.directive.ts
+++ b/components/tabs/nz-tabs-ink-bar.directive.ts
@@ -6,6 +6,7 @@ import { NzTabPositionMode } from './nz-tabset.component';
 
 @Directive({
   selector: '[nz-tabs-ink-bar]',
+  exportAs: 'nzTabsInkBar',
   host: {
     '[class.ant-tabs-ink-bar-animated]': 'nzAnimated',
     '[class.ant-tabs-ink-bar-no-animated]': '!nzAnimated'
diff --git a/components/tabs/nz-tabs-nav.component.ts b/components/tabs/nz-tabs-nav.component.ts
index 51989382e2e..2074aa67a5e 100644
--- a/components/tabs/nz-tabs-nav.component.ts
+++ b/components/tabs/nz-tabs-nav.component.ts
@@ -33,6 +33,7 @@ export type ScrollDirection = 'after' | 'before';
 
 @Component({
   selector: '[nz-tabs-nav]',
+  exportAs: 'nzTabsNav',
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
diff --git a/components/tabs/nz-tabset.component.ts b/components/tabs/nz-tabset.component.ts
index fa4d0bcb023..b3294877ec3 100644
--- a/components/tabs/nz-tabset.component.ts
+++ b/components/tabs/nz-tabset.component.ts
@@ -47,6 +47,7 @@ export type NzTabType = 'line' | 'card';
 
 @Component({
   selector: 'nz-tabset',
+  exportAs: 'nzTabset',
   preserveWhitespaces: false,
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/components/tag/nz-tag.component.ts b/components/tag/nz-tag.component.ts
index 066eea40b63..0bd4de62a7a 100644
--- a/components/tag/nz-tag.component.ts
+++ b/components/tag/nz-tag.component.ts
@@ -17,6 +17,7 @@ import { InputBoolean } from '../core/util/convert';
 
 @Component({
   selector: 'nz-tag',
+  exportAs: 'nzTag',
   preserveWhitespaces: false,
   providers: [NzUpdateHostClassService],
   animations: [fadeMotion],
diff --git a/components/time-picker/nz-time-picker-panel.component.ts b/components/time-picker/nz-time-picker-panel.component.ts
index 9c364db378f..4644cfa04e3 100644
--- a/components/time-picker/nz-time-picker-panel.component.ts
+++ b/components/time-picker/nz-time-picker-panel.component.ts
@@ -35,6 +35,7 @@ export type NzTimePickerUnit = 'hour' | 'minute' | 'second' | '12-hour';
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'nz-time-picker-panel',
+  exportAs: 'nzTimePickerPanel',
   templateUrl: './nz-time-picker-panel.component.html',
   providers: [UpdateCls, { provide: NG_VALUE_ACCESSOR, useExisting: NzTimePickerPanelComponent, multi: true }]
 })
diff --git a/components/time-picker/nz-time-picker.component.ts b/components/time-picker/nz-time-picker.component.ts
index 52a33b5531e..43336e4b8ab 100644
--- a/components/time-picker/nz-time-picker.component.ts
+++ b/components/time-picker/nz-time-picker.component.ts
@@ -26,6 +26,7 @@ import { toBoolean } from '../core/util/convert';
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'nz-time-picker',
+  exportAs: 'nzTimePicker',
   templateUrl: './nz-time-picker.component.html',
   animations: [slideMotion],
   providers: [UpdateCls, { provide: NG_VALUE_ACCESSOR, useExisting: NzTimePickerComponent, multi: true }]
diff --git a/components/time-picker/nz-time-value-accessor.directive.ts b/components/time-picker/nz-time-value-accessor.directive.ts
index a7b3d22d2a3..831d948c410 100644
--- a/components/time-picker/nz-time-value-accessor.directive.ts
+++ b/components/time-picker/nz-time-value-accessor.directive.ts
@@ -4,6 +4,7 @@ import { DateHelperService } from '../i18n/date-helper.service';
 
 @Directive({
   selector: 'input[nzTime]',
+  exportAs: 'nzTime',
   providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: NzTimeValueAccessorDirective, multi: true }]
 })
 export class NzTimeValueAccessorDirective implements ControlValueAccessor {
diff --git a/components/timeline/nz-timeline-item.component.ts b/components/timeline/nz-timeline-item.component.ts
index e0e6f5eb3e0..5097ab4cf45 100644
--- a/components/timeline/nz-timeline-item.component.ts
+++ b/components/timeline/nz-timeline-item.component.ts
@@ -20,6 +20,7 @@ import { NzTimelineMode } from './nz-timeline.component';
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
   selector: 'nz-timeline-item, [nz-timeline-item]',
+  exportAs: 'nzTimelineItem',
   templateUrl: './nz-timeline-item.component.html'
 })
 export class NzTimelineItemComponent implements OnInit, OnChanges {
diff --git a/components/timeline/nz-timeline.component.ts b/components/timeline/nz-timeline.component.ts
index db361d65deb..60b759ed4f6 100644
--- a/components/timeline/nz-timeline.component.ts
+++ b/components/timeline/nz-timeline.component.ts
@@ -28,6 +28,7 @@ export type NzTimelineMode = 'left' | 'alternate' | 'right';
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
   selector: 'nz-timeline',
+  exportAs: 'nzTimeline',
   templateUrl: './nz-timeline.component.html'
 })
 export class NzTimelineComponent implements AfterContentInit, OnChanges, OnDestroy {
diff --git a/components/tooltip/nz-tooltip.component.ts b/components/tooltip/nz-tooltip.component.ts
index 93019fdf77f..f89944ac649 100644
--- a/components/tooltip/nz-tooltip.component.ts
+++ b/components/tooltip/nz-tooltip.component.ts
@@ -29,6 +29,7 @@ import { toBoolean } from '../core/util/convert';
 
 @Component({
   selector: 'nz-tooltip',
+  exportAs: 'nzTooltipComponent',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   animations: [zoomBigMotion],
diff --git a/components/tooltip/nz-tooltip.directive.ts b/components/tooltip/nz-tooltip.directive.ts
index 2956987e85a..99f673f761f 100644
--- a/components/tooltip/nz-tooltip.directive.ts
+++ b/components/tooltip/nz-tooltip.directive.ts
@@ -28,6 +28,7 @@ import { NzToolTipComponent } from './nz-tooltip.component';
 
 @Directive({
   selector: '[nz-tooltip]',
+  exportAs: 'nzTooltip',
   host: {
     '[class.ant-tooltip-open]': 'isTooltipOpen'
   }
diff --git a/components/transfer/nz-transfer-list.component.ts b/components/transfer/nz-transfer-list.component.ts
index 39a250e062f..8ff6001dad4 100644
--- a/components/transfer/nz-transfer-list.component.ts
+++ b/components/transfer/nz-transfer-list.component.ts
@@ -19,6 +19,7 @@ import { TransferItem } from './interface';
 
 @Component({
   selector: 'nz-transfer-list',
+  exportAs: 'nzTransferList',
   preserveWhitespaces: false,
   providers: [NzUpdateHostClassService],
   templateUrl: './nz-transfer-list.component.html',
diff --git a/components/transfer/nz-transfer-search.component.ts b/components/transfer/nz-transfer-search.component.ts
index 7f1de340fd2..8492547bc5a 100644
--- a/components/transfer/nz-transfer-search.component.ts
+++ b/components/transfer/nz-transfer-search.component.ts
@@ -11,6 +11,7 @@ import {
 
 @Component({
   selector: '[nz-transfer-search]',
+  exportAs: 'nzTransferSearch',
   preserveWhitespaces: false,
   templateUrl: './nz-transfer-search.component.html',
   encapsulation: ViewEncapsulation.None,
diff --git a/components/transfer/nz-transfer.component.ts b/components/transfer/nz-transfer.component.ts
index 214516d5e7b..68e5dfd462a 100644
--- a/components/transfer/nz-transfer.component.ts
+++ b/components/transfer/nz-transfer.component.ts
@@ -28,6 +28,7 @@ import { NzTransferListComponent } from './nz-transfer-list.component';
 
 @Component({
   selector: 'nz-transfer',
+  exportAs: 'nzTransfer',
   preserveWhitespaces: false,
   templateUrl: './nz-transfer.component.html',
   host: {
diff --git a/components/tree-select/nz-tree-select.component.ts b/components/tree-select/nz-tree-select.component.ts
index 00229b9c7d1..92bf6e25b29 100644
--- a/components/tree-select/nz-tree-select.component.ts
+++ b/components/tree-select/nz-tree-select.component.ts
@@ -36,6 +36,7 @@ import { NzTreeSelectService } from './nz-tree-select.service';
 
 @Component({
   selector: 'nz-tree-select',
+  exportAs: 'nzTreeSelect',
   animations: [slideMotion, zoomMotion],
   templateUrl: './nz-tree-select.component.html',
   providers: [
diff --git a/components/tree/nz-tree-node.component.ts b/components/tree/nz-tree-node.component.ts
index 71c7000dc5f..e2d2dfaa46a 100644
--- a/components/tree/nz-tree-node.component.ts
+++ b/components/tree/nz-tree-node.component.ts
@@ -26,6 +26,7 @@ import { NzTreeNode } from './nz-tree-node';
 
 @Component({
   selector: 'nz-tree-node',
+  exportAs: 'nzTreeNode',
   templateUrl: './nz-tree-node.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   preserveWhitespaces: false,
diff --git a/components/tree/nz-tree.component.ts b/components/tree/nz-tree.component.ts
index 351dd79f49d..23567d15d31 100644
--- a/components/tree/nz-tree.component.ts
+++ b/components/tree/nz-tree.component.ts
@@ -37,6 +37,7 @@ export function NzTreeServiceFactory(
 
 @Component({
   selector: 'nz-tree',
+  exportAs: 'nzTree',
   templateUrl: './nz-tree.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
diff --git a/components/upload/nz-upload-btn.component.ts b/components/upload/nz-upload-btn.component.ts
index 1978e90e9d5..bb33fc94896 100644
--- a/components/upload/nz-upload-btn.component.ts
+++ b/components/upload/nz-upload-btn.component.ts
@@ -21,6 +21,7 @@ import { UploadFile, UploadXHRArgs, ZipButtonOptions } from './interface';
 
 @Component({
   selector: '[nz-upload-btn]',
+  exportAs: 'nzUploadBtn',
   templateUrl: './nz-upload-btn.component.html',
   host: {
     '[attr.tabindex]': '"0"',
diff --git a/components/upload/nz-upload-list.component.ts b/components/upload/nz-upload-list.component.ts
index 73aedee5276..a4be22b6909 100644
--- a/components/upload/nz-upload-list.component.ts
+++ b/components/upload/nz-upload-list.component.ts
@@ -15,6 +15,7 @@ import { ShowUploadListInterface, UploadFile, UploadListType } from './interface
 
 @Component({
   selector: 'nz-upload-list',
+  exportAs: 'nzUploadList',
   templateUrl: './nz-upload-list.component.html',
   providers: [NzUpdateHostClassService],
   animations: [
diff --git a/components/upload/nz-upload.component.ts b/components/upload/nz-upload.component.ts
index 8dbb6ffff65..f42e7a442ea 100644
--- a/components/upload/nz-upload.component.ts
+++ b/components/upload/nz-upload.component.ts
@@ -34,6 +34,7 @@ import { NzUploadListComponent } from './nz-upload-list.component';
 
 @Component({
   selector: 'nz-upload',
+  exportAs: 'nzUpload',
   templateUrl: './nz-upload.component.html',
   preserveWhitespaces: false,
   encapsulation: ViewEncapsulation.None,
diff --git a/scripts/code-check/export-as-fix.js b/scripts/code-check/export-as-fix.js
new file mode 100644
index 00000000000..e8ea0ca1e7a
--- /dev/null
+++ b/scripts/code-check/export-as-fix.js
@@ -0,0 +1,61 @@
+const fs = require('fs-extra');
+const path = require('path');
+const glob = require('glob').sync;
+const chalk = require('chalk');
+
+const componentsPath = path.resolve(__dirname, '../../components');
+
+function getComponentPaths() {
+  return glob(path.join(componentsPath, '**/!(demo)/!(*.spec).ts'));
+}
+
+function toCamelCase(str) {
+  var re = /-(\w)/g;
+  return str.replace(re, function($0, $1) {
+    return $1.toUpperCase();
+  });
+}
+
+function fixExportAs(filePath) {
+  const fileContent = fs.readFileSync(filePath, 'utf-8');
+  const whitelist = ['tbody', 'tr'];
+  const selectorRegexp = /selector\s*:\s*(('(.+)')|(`([\s\S]*?)`))/g;
+  const exportAsRegexp = /exportAs\s*:\s*(('(.+)')|(`([\s\S]*?)`))/g;
+  const componentSelectorRegexp = /^[a-z\-]{1,}$/;
+  const directiveSelectorRegexp = /^\[([a-z\-]{1,})\]$/;
+  if (fileContent.search('@(Component|Directive)') !== -1) {
+    const match = selectorRegexp.exec(fileContent);
+    if (exportAsRegexp.test(fileContent)) {
+      return;
+    }
+    let selector = '';
+    let exportName = '';
+    if (match) {
+      if (match[3]) {
+        selector = match[3];
+      } else if (match[5]) {
+        console.log(chalk.gray(`Ignore ${match[5]}`));
+      }
+    }
+
+    if (componentSelectorRegexp.test(selector)) {
+      exportName = selector;
+    }
+    if (directiveSelectorRegexp.test(selector)) {
+      exportName = directiveSelectorRegexp.exec(selector)[1];
+    }
+
+    if (exportName && whitelist.indexOf(exportName) === -1 && exportName.search('demo') === -1) {
+      const newContent = fileContent.replace(selectorRegexp, `$&,\n exportAs: '${toCamelCase(exportName)}'`);
+      fs.writeFileSync(filePath, newContent);
+      console.log(chalk.green(`fix: ${filePath}`));
+    } else {
+      console.log(chalk.yellow(`Please manually check: ${filePath}`));
+    }
+  }
+}
+
+const paths = getComponentPaths();
+paths.forEach(p => {
+  fixExportAs(p);
+});