diff --git a/components/auto-complete/nz-autocomplete-optgroup.component.html b/components/auto-complete/nz-autocomplete-optgroup.component.html
index 2b5e11379ac..03024e15330 100644
--- a/components/auto-complete/nz-autocomplete-optgroup.component.html
+++ b/components/auto-complete/nz-autocomplete-optgroup.component.html
@@ -1,8 +1,5 @@
 <div class="ant-select-dropdown-menu-item-group-title">
-  <ng-container *ngIf="isLabelString; else labelTemplate">{{nzLabel}}</ng-container>
-  <ng-template #labelTemplate>
-    <ng-template [ngTemplateOutlet]="nzLabel"></ng-template>
-  </ng-template>
+  <ng-container *nzStringTemplateOutlet="nzLabel">{{nzLabel}}</ng-container>
 </div>
 <ul class="ant-select-dropdown-menu-item-group-list">
   <ng-content select="nz-auto-option"></ng-content>
diff --git a/components/auto-complete/nz-autocomplete-optgroup.component.ts b/components/auto-complete/nz-autocomplete-optgroup.component.ts
index 16948c53d63..57634ab7a85 100644
--- a/components/auto-complete/nz-autocomplete-optgroup.component.ts
+++ b/components/auto-complete/nz-autocomplete-optgroup.component.ts
@@ -1,14 +1,10 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  TemplateRef
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
 
 @Component({
   selector           : 'nz-auto-optgroup',
   preserveWhitespaces: false,
   changeDetection    : ChangeDetectionStrategy.OnPush,
+  encapsulation      : ViewEncapsulation.None,
   templateUrl        : './nz-autocomplete-optgroup.component.html',
   host               : {
     'role' : 'group',
@@ -16,20 +12,8 @@ import {
   }
 })
 export class NzAutocompleteOptgroupComponent {
-  isLabelString: boolean;
 
-  /** group 的 label，支持 'string' 和 `TemplateRef` */
-  @Input()
-  set nzLabel(value: string | TemplateRef<void>) {
-    this.isLabelString = !(value instanceof TemplateRef);
-    this._label = value;
-  }
-
-  get nzLabel(): string | TemplateRef<void> {
-    return this._label;
-  }
-
-  _label: string | TemplateRef<void>;
+  @Input() nzLabel: string | TemplateRef<void>;
 
   constructor() {
   }
diff --git a/components/auto-complete/nz-autocomplete-option.component.ts b/components/auto-complete/nz-autocomplete-option.component.ts
index 8765711e000..f52204b94e5 100644
--- a/components/auto-complete/nz-autocomplete-option.component.ts
+++ b/components/auto-complete/nz-autocomplete-option.component.ts
@@ -1,11 +1,16 @@
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
-  Component, ElementRef, EventEmitter,
-  Input, Output
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  ViewEncapsulation
 } from '@angular/core';
 
-import { toBoolean } from '../core/util/convert';
+import { InputBoolean } from '../core/util/convert';
+import { scrollIntoView } from '../core/util/scroll-into-view-if-needed';
 
 export class NzOptionSelectionChange {
   constructor(
@@ -19,6 +24,7 @@ export class NzOptionSelectionChange {
   selector           : 'nz-auto-option',
   preserveWhitespaces: false,
   changeDetection    : ChangeDetectionStrategy.OnPush,
+  encapsulation      : ViewEncapsulation.None,
   templateUrl        : './nz-autocomplete-option.component.html',
   host               : {
     'role'                                          : 'menuitem',
@@ -32,49 +38,37 @@ export class NzOptionSelectionChange {
   }
 })
 export class NzAutocompleteOptionComponent {
-  private disabled = false;
-
-  active = false;
-  selected = false;
 
   /* tslint:disable-next-line:no-any */
   @Input() nzValue: any;
   @Input() nzLabel: string;
-
-  @Input()
-  get nzDisabled(): boolean {
-    return this.disabled;
-  }
-
-  set nzDisabled(value: boolean) {
-    this.disabled = toBoolean(value);
-  }
-
+  @Input() @InputBoolean() nzDisabled = false;
   @Output() readonly selectionChange = new EventEmitter<NzOptionSelectionChange>();
 
+  active = false;
+  selected = false;
+
   constructor(private changeDetectorRef: ChangeDetectorRef, private element: ElementRef) {
   }
 
-  /** 选择 */
   select(): void {
     this.selected = true;
     this.changeDetectorRef.markForCheck();
     this.emitSelectionChangeEvent();
   }
 
-  /** 取消选择 */
   deselect(): void {
     this.selected = false;
     this.changeDetectorRef.markForCheck();
     this.emitSelectionChangeEvent();
   }
 
-  /** 获取用于显示的 label */
+  /** Git display label */
   getLabel(): string {
     return this.nzLabel || this.nzValue.toString();
   }
 
-  /** 设置激活样式 (仅限样式) */
+  /** Set active (only styles) */
   setActiveStyles(): void {
     if (!this.active) {
       this.active = true;
@@ -82,7 +76,7 @@ export class NzAutocompleteOptionComponent {
     }
   }
 
-  /** 设置非激活样式 (仅限样式) */
+  /** Unset active (only styles) */
   setInactiveStyles(): void {
     if (this.active) {
       this.active = false;
@@ -91,19 +85,11 @@ export class NzAutocompleteOptionComponent {
   }
 
   scrollIntoViewIfNeeded(): void {
-    /* tslint:disable-next-line:no-string-literal */
-    if (this.element.nativeElement && this.element.nativeElement['scrollIntoViewIfNeeded']) {
-      /* tslint:disable-next-line:no-string-literal */
-      setTimeout(() =>  this.element.nativeElement[ 'scrollIntoViewIfNeeded' ](false), 150);
-    }
-  }
-
-  private emitSelectionChangeEvent(isUserInput: boolean = false): void {
-    this.selectionChange.emit(new NzOptionSelectionChange(this, isUserInput));
+    scrollIntoView(this.element.nativeElement);
   }
 
   selectViaInteraction(): void {
-    if (!this.disabled) {
+    if (!this.nzDisabled) {
       this.selected = !this.selected;
       if (this.selected) {
         this.setActiveStyles();
@@ -115,4 +101,8 @@ export class NzAutocompleteOptionComponent {
     }
   }
 
+  private emitSelectionChangeEvent(isUserInput: boolean = false): void {
+    this.selectionChange.emit(new NzOptionSelectionChange(this, isUserInput));
+  }
+
 }
diff --git a/components/auto-complete/nz-autocomplete-trigger.directive.ts b/components/auto-complete/nz-autocomplete-trigger.directive.ts
index e5b29df62d1..6ca0873c994 100644
--- a/components/auto-complete/nz-autocomplete-trigger.directive.ts
+++ b/components/auto-complete/nz-autocomplete-trigger.directive.ts
@@ -56,26 +56,20 @@ export function getNzAutocompleteMissingPanelError(): Error {
 })
 export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnDestroy {
 
-  /**
-   * 当前被激活的 Option
-   */
+  /** Bind nzAutocomplete component */
+  @Input() nzAutocomplete: NzAutocompleteComponent;
+
+  _onChange: (value: {}) => void = () => {};
+  _onTouched = () => {};
+  panelOpen: boolean = false;
+
+  /** Current active option */
   get activeOption(): NzAutocompleteOptionComponent {
     if (this.nzAutocomplete && this.nzAutocomplete.options.length) {
       return this.nzAutocomplete.activeItem;
     }
   }
 
-  panelOpen: boolean = false;
-
-  /** 用于绑定 nzAutocomplete 组件 */
-  @Input() nzAutocomplete: NzAutocompleteComponent;
-
-  constructor(private _element: ElementRef, private _overlay: Overlay,
-              private _viewContainerRef: ViewContainerRef,
-              // tslint:disable-next-line:no-any
-              @Optional() @Inject(DOCUMENT) private _document: any) {
-  }
-
   private overlayRef: OverlayRef | null;
   private portal: TemplatePortal<{}>;
   private positionStrategy: FlexibleConnectedPositionStrategy;
@@ -85,8 +79,36 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
   private overlayBackdropClickSubscription: Subscription;
   private overlayPositionChangeSubscription: Subscription;
 
-  _onChange: (value: {}) => void = () => {};
-  _onTouched = () => {};
+  constructor(
+    private elementRef: ElementRef,
+    private _overlay: Overlay,
+    private viewContainerRef: ViewContainerRef,
+    // tslint:disable-next-line:no-any
+    @Optional() @Inject(DOCUMENT) private document: any) {
+  }
+
+  ngOnDestroy(): void {
+    this.destroyPanel();
+  }
+
+  // tslint:disable-next-line:no-any
+  writeValue(value: any): void {
+    this.setTriggerValue(value);
+  }
+
+  registerOnChange(fn: (value: {}) => {}): void {
+    this._onChange = fn;
+  }
+
+  registerOnTouched(fn: () => {}): void {
+    this._onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    const element: HTMLInputElement = this.elementRef.nativeElement;
+    element.disabled = isDisabled;
+    this.closePanel();
+  }
 
   openPanel(): void {
     this.attachOverlay();
@@ -97,11 +119,13 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
       this.nzAutocomplete.isOpen = this.panelOpen = false;
 
       if (this.overlayRef && this.overlayRef.hasAttached()) {
-        this.overlayRef.detach();
         this.selectionChangeSubscription.unsubscribe();
         this.overlayBackdropClickSubscription.unsubscribe();
         this.overlayPositionChangeSubscription.unsubscribe();
         this.optionsChangeSubscription.unsubscribe();
+        this.overlayRef.detach();
+        this.overlayRef = null;
+        this.portal = null;
       }
     }
   }
@@ -115,8 +139,8 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
     }
 
     if (this.panelOpen && (keyCode === ESCAPE || keyCode === TAB)) {
-      // 通过 tab / ESC 关闭，重置输入标签 value
-      if (this.activeOption.getLabel() !== this.previousValue) {
+      // Reset value when tab / ESC close
+      if (this.activeOption && this.activeOption.getLabel() !== this.previousValue) {
         this.setTriggerValue(this.previousValue);
       }
       this.closePanel();
@@ -155,7 +179,7 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
 
   handleFocus(): void {
     if (this.canOpen()) {
-      this.previousValue = this._element.nativeElement.value;
+      this.previousValue = this.elementRef.nativeElement.value;
       this.openPanel();
     }
   }
@@ -164,31 +188,8 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
     this._onTouched();
   }
 
-  // tslint:disable-next-line:no-any
-  writeValue(value: any): void {
-    this.setTriggerValue(value);
-  }
-
-  registerOnChange(fn: (value: {}) => {}): void {
-    this._onChange = fn;
-  }
-
-  registerOnTouched(fn: () => {}): void {
-    this._onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    const element: HTMLInputElement = this._element.nativeElement;
-    element.disabled = isDisabled;
-    this.closePanel();
-  }
-
-  ngOnDestroy(): void {
-    this.destroyPanel();
-  }
-
   /**
-   * 订阅数据源改变事件
+   * Subscription data source changes event
    */
   private subscribeOptionsChange(): Subscription {
     return this.nzAutocomplete.options.changes.pipe(
@@ -199,8 +200,7 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
   }
 
   /**
-   * 订阅 option 选择事件
-   * 并设置值
+   * Subscription option changes event and set the value
    */
   private subscribeSelectionChange(): Subscription {
     return this.nzAutocomplete.selectionChange
@@ -210,27 +210,25 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
   }
 
   /**
-   * 订阅组件外部的单击事件
-   * 并关闭弹窗
+   * Subscription external click and close panel
    */
   private subscribeOverlayBackdropClick(): Subscription {
     return merge<MouseEvent | TouchEvent>(
-      fromEvent<MouseEvent>(this._document, 'click'),
-      fromEvent<TouchEvent>(this._document, 'touchend')
+      fromEvent<MouseEvent>(this.document, 'click'),
+      fromEvent<TouchEvent>(this.document, 'touchend')
     )
     .subscribe((event: MouseEvent | TouchEvent) => {
       const clickTarget = event.target as HTMLElement;
 
-      // 确保不是点击组件自身
-      if (clickTarget !== this._element.nativeElement && !this.overlayRef.overlayElement.contains(clickTarget) && this.panelOpen) {
+      // Make sure is not self
+      if (clickTarget !== this.elementRef.nativeElement && !this.overlayRef.overlayElement.contains(clickTarget) && this.panelOpen) {
         this.closePanel();
       }
     });
   }
 
   /**
-   * 订阅 Overlay 位置改变事件
-   * 并重新设置动画方向
+   * Subscription overlay position changes and reset dropdown position
    */
   private subscribeOverlayPositionChange(): Subscription {
     return this.positionStrategy.positionChanges
@@ -248,8 +246,11 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
       throw getNzAutocompleteMissingPanelError();
     }
 
+    if (!this.portal) {
+      this.portal = new TemplatePortal(this.nzAutocomplete.template, this.viewContainerRef);
+    }
+
     if (!this.overlayRef) {
-      this.portal = new TemplatePortal(this.nzAutocomplete.template, this._viewContainerRef);
       this.overlayRef = this._overlay.create(this.getOverlayConfig());
     }
 
@@ -278,8 +279,6 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
   private destroyPanel(): void {
     if (this.overlayRef) {
       this.closePanel();
-      this.overlayRef.dispose();
-      this.overlayRef = null;
     }
   }
 
@@ -287,13 +286,13 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
     return new OverlayConfig({
       positionStrategy: this.getOverlayPosition(),
       scrollStrategy  : this._overlay.scrollStrategies.reposition(),
-      // 如果没有设置 nzWidth 则使用 Host 元素的宽度
+      // default host element width
       width           : this.nzAutocomplete.nzWidth || this.getHostWidth()
     });
   }
 
   private getConnectedElement(): ElementRef {
-    return this._element;
+    return this.elementRef;
   }
 
   private getHostWidth(): number {
@@ -325,23 +324,22 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
     const value = option.nzValue;
     this.setTriggerValue(option.getLabel());
     this._onChange(value);
-    this._element.nativeElement.focus();
+    this.elementRef.nativeElement.focus();
     this.closePanel();
   }
 
   private setTriggerValue(value: string | number | null): void {
-    this._element.nativeElement.value = value || '';
+    this.elementRef.nativeElement.value = value || '';
   }
 
   private doBackfill(): void {
-    if (this.nzAutocomplete.nzBackfill) {
-      // 只设置标签显示值
+    if (this.nzAutocomplete.nzBackfill && this.nzAutocomplete.activeItem) {
       this.setTriggerValue(this.nzAutocomplete.activeItem.getLabel());
     }
   }
 
   private canOpen(): boolean {
-    const element: HTMLInputElement = this._element.nativeElement;
+    const element: HTMLInputElement = this.elementRef.nativeElement;
     return !element.readOnly && !element.disabled;
   }
 }
diff --git a/components/auto-complete/nz-autocomplete.component.ts b/components/auto-complete/nz-autocomplete.component.ts
index b6449e5c439..56f39a4cc38 100644
--- a/components/auto-complete/nz-autocomplete.component.ts
+++ b/components/auto-complete/nz-autocomplete.component.ts
@@ -6,18 +6,18 @@ import {
   ContentChildren,
   ElementRef,
   EventEmitter,
-  Input, NgZone,
+  Input, NgZone, OnDestroy,
   Output,
   QueryList,
   TemplateRef,
-  ViewChild, ViewChildren
+  ViewChild, ViewChildren, ViewEncapsulation
 } from '@angular/core';
 import { defer, merge, Observable, Subscription } from 'rxjs';
 import { filter, switchMap, take } from 'rxjs/operators';
 
-import { toBoolean } from '../core/util/convert';
-
 import { dropDownAnimation } from '../core/animation/dropdown-animations';
+import { NzDropDownPosition } from '../core/types/drop-down-position';
+import { InputBoolean } from '../core/util/convert';
 import { NzAutocompleteOptionComponent, NzOptionSelectionChange } from './nz-autocomplete-option.component';
 
 export interface AutocompleteDataSourceItem {
@@ -31,36 +31,42 @@ export type AutocompleteDataSource = AutocompleteDataSourceItem[] | string[] | n
   selector           : 'nz-autocomplete',
   preserveWhitespaces: false,
   changeDetection    : ChangeDetectionStrategy.OnPush,
+  encapsulation      : ViewEncapsulation.None,
+  templateUrl        : './nz-autocomplete.component.html',
   animations         : [
     dropDownAnimation
   ],
-  templateUrl        : './nz-autocomplete.component.html',
   styles             : [
-    `
-    .ant-select-dropdown {
-      top: 100%;
-      left: 0;
-      position: relative;
-      width: 100%;
-      margin-top: 4px;
-      margin-bottom: 4px;
-    }
+      `
+      .ant-select-dropdown {
+        top: 100%;
+        left: 0;
+        position: relative;
+        width: 100%;
+        margin-top: 4px;
+        margin-bottom: 4px;
+      }
     `
   ]
 })
-export class NzAutocompleteComponent implements AfterViewInit {
-  private activeItemIndex: number = -1;
-  private selectionChangeSubscription: Subscription;
+export class NzAutocompleteComponent implements AfterViewInit, OnDestroy {
+
+  @Input() nzWidth: number;
+  @Input() @InputBoolean() nzDefaultActiveFirstOption = true;
+  @Input() @InputBoolean() nzBackfill = false;
+  @Input() nzDataSource: AutocompleteDataSource;
+  @Output() readonly selectionChange: EventEmitter<NzAutocompleteOptionComponent> = new EventEmitter<NzAutocompleteOptionComponent>();
 
   showPanel: boolean = false;
   isOpen: boolean = false;
   activeItem: NzAutocompleteOptionComponent;
-  dropDownPosition: 'top' | 'center' | 'bottom' = 'bottom';
+  dropDownPosition: NzDropDownPosition = 'bottom';
 
-  /** 组件支持设置 dataSource 和 content 设置 options
-   *  这个属性为其提供方便的访问方式 */
+  /**
+   * Options accessor, its source may be content or dataSource
+   */
   get options(): QueryList<NzAutocompleteOptionComponent> {
-    // 优先使用 dataSource
+    // first dataSource
     if (this.nzDataSource) {
       return this.fromDataSourceOptions;
     } else {
@@ -68,77 +74,41 @@ export class NzAutocompleteComponent implements AfterViewInit {
     }
   }
 
-  /** 提供给 cdk-overlay 用于渲染 */
-  @ViewChild(TemplateRef) template: TemplateRef<{}>;
-
-  @ViewChild('panel') panel: ElementRef;
-  @ViewChild('content') content: ElementRef;
-
-  /** 由 Content 提供 options */
+  /** Provided by content */
   @ContentChildren(NzAutocompleteOptionComponent, { descendants: true }) fromContentOptions: QueryList<NzAutocompleteOptionComponent>;
-
-  /** 由 nzDataSource 提供 options */
+  /** Provided by dataSource */
   @ViewChildren(NzAutocompleteOptionComponent) fromDataSourceOptions: QueryList<NzAutocompleteOptionComponent>;
 
-  /** 自定义宽度单位 px */
-  @Input() nzWidth: number;
-
-  /** 是否默认高亮第一个选项，默认 `true` */
-  @Input()
-  get nzDefaultActiveFirstOption(): boolean {
-    return this._defaultActiveFirstOption;
-  }
-
-  set nzDefaultActiveFirstOption(value: boolean) {
-    this._defaultActiveFirstOption = toBoolean(value);
-  }
-
-  _defaultActiveFirstOption: boolean = true;
-
-  /** 使用键盘选择选项的时候把选中项回填到输入框中，默认 `false` */
-  @Input()
-  get nzBackfill(): boolean {
-    return this._backfill;
-  }
-
-  set nzBackfill(value: boolean) {
-    this._backfill = toBoolean(value);
-  }
-
-  _backfill: boolean = false;
-
-  /** 自动完成的数据源 */
-  @Input()
-  get nzDataSource(): AutocompleteDataSource {
-    return this._dataSource;
-  }
-
-  set nzDataSource(value: AutocompleteDataSource) {
-    this._dataSource = value;
-  }
-
-  _dataSource: AutocompleteDataSource;
-
-  /** 选择时发出的事件 */
-  @Output() readonly selectionChange: EventEmitter<NzAutocompleteOptionComponent> = new EventEmitter<NzAutocompleteOptionComponent>();
+  /** cdk-overlay */
+  @ViewChild(TemplateRef) template: TemplateRef<{}>;
+  @ViewChild('panel') panel: ElementRef;
+  @ViewChild('content') content: ElementRef;
 
-  /** 用于组件内部监听 options 的选择变化 */
+  private activeItemIndex: number = -1;
+  private selectionChangeSubscription = Subscription.EMPTY;
+  private dataSourceChangeSubscription = Subscription.EMPTY;
+  /** Options changes listener */
   readonly optionSelectionChanges: Observable<NzOptionSelectionChange> = defer(() => {
     if (this.options) {
       return merge(...this.options.map(option => option.selectionChange));
     }
-    return this._ngZone.onStable
+    return this.ngZone.onStable
     .asObservable()
     .pipe(take(1), switchMap(() => this.optionSelectionChanges));
   });
 
-  constructor(private changeDetectorRef: ChangeDetectorRef, private _ngZone: NgZone) {
+  constructor(private changeDetectorRef: ChangeDetectorRef, private ngZone: NgZone) {
   }
 
   ngAfterViewInit(): void {
     this.optionsInit();
   }
 
+  ngOnDestroy(): void {
+    this.dataSourceChangeSubscription.unsubscribe();
+    this.selectionChangeSubscription.unsubscribe();
+  }
+
   setVisibility(): void {
     this.showPanel = !!this.options.length;
     this.changeDetectorRef.markForCheck();
@@ -176,17 +146,17 @@ export class NzAutocompleteComponent implements AfterViewInit {
     this.subscribeOptionChanges();
     const changes = this.nzDataSource ? this.fromDataSourceOptions.changes : this.fromContentOptions.changes;
 
-    // 用于处理动态/异步的 options
-    changes.subscribe(e => {
+    // async
+    this.dataSourceChangeSubscription = changes.subscribe(e => {
       if (!e.dirty && this.isOpen) {
-        setTimeout(_ => this.setVisibility());
+        setTimeout(() => this.setVisibility());
       }
       this.subscribeOptionChanges();
     });
   }
 
   /**
-   * 清除 Options 的激活状态
+   * Clear the status of options
    */
   private clearSelectedOptions(skip?: NzAutocompleteOptionComponent, deselect: boolean = false): void {
     this.options.forEach(option => {
@@ -200,6 +170,7 @@ export class NzAutocompleteComponent implements AfterViewInit {
   }
 
   private subscribeOptionChanges(): void {
+    this.selectionChangeSubscription.unsubscribe();
     this.selectionChangeSubscription = this.optionSelectionChanges
     .pipe(filter((event: NzOptionSelectionChange) => event.isUserInput))
     .subscribe((event: NzOptionSelectionChange) => {
diff --git a/components/auto-complete/nz-autocomplete.module.ts b/components/auto-complete/nz-autocomplete.module.ts
index 5c28cda124f..bdcd4fbba76 100644
--- a/components/auto-complete/nz-autocomplete.module.ts
+++ b/components/auto-complete/nz-autocomplete.module.ts
@@ -3,6 +3,8 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
+import { NzAddOnModule } from '../core/addon/addon.module';
+
 import { NzAutocompleteOptgroupComponent } from './nz-autocomplete-optgroup.component';
 import { NzAutocompleteOptionComponent } from './nz-autocomplete-option.component';
 import { NzAutocompleteTriggerDirective } from './nz-autocomplete-trigger.directive';
@@ -11,7 +13,7 @@ import { NzAutocompleteComponent } from './nz-autocomplete.component';
 @NgModule({
   declarations: [NzAutocompleteComponent, NzAutocompleteOptionComponent, NzAutocompleteTriggerDirective, NzAutocompleteOptgroupComponent],
   exports: [NzAutocompleteComponent, NzAutocompleteOptionComponent, NzAutocompleteTriggerDirective, NzAutocompleteOptgroupComponent],
-  imports: [CommonModule, OverlayModule, FormsModule]
+  imports: [CommonModule, OverlayModule, FormsModule, NzAddOnModule]
 })
 export class NzAutocompleteModule {
 }
diff --git a/components/core/types/drop-down-position.ts b/components/core/types/drop-down-position.ts
new file mode 100644
index 00000000000..d8f95268066
--- /dev/null
+++ b/components/core/types/drop-down-position.ts
@@ -0,0 +1 @@
+export type NzDropDownPosition = 'top' | 'center' | 'bottom';
diff --git a/components/core/util/scroll-into-view-if-needed.ts b/components/core/util/scroll-into-view-if-needed.ts
new file mode 100644
index 00000000000..08494eda6c0
--- /dev/null
+++ b/components/core/util/scroll-into-view-if-needed.ts
@@ -0,0 +1,15 @@
+export function scrollIntoView(node: HTMLElement): void {
+
+  // Non-standard
+  /* tslint:disable-next-line:no-string-literal */
+  if (node['scrollIntoViewIfNeeded']) {
+    /* tslint:disable-next-line:no-string-literal */
+    node['scrollIntoViewIfNeeded'](false);
+    return;
+  }
+
+  if (node.scrollIntoView) {
+    node.scrollIntoView(false);
+    return;
+  }
+}