diff --git a/components/cascader/nz-cascader.component.ts b/components/cascader/nz-cascader.component.ts
index 3f16d7b4e07..ccbc846d934 100644
--- a/components/cascader/nz-cascader.component.ts
+++ b/components/cascader/nz-cascader.component.ts
@@ -568,7 +568,9 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
     }
 
     this.labelRenderText = '';
-    this.isLabelRenderTemplate = false;
+    // this.isLabelRenderTemplate = false;
+    // clear custom context
+    this.labelRenderContext = {};
     this.selectedOptions = [];
     this.activatedOptions = [];
     this.inputValue = '';
diff --git a/components/cascader/nz-cascader.spec.ts b/components/cascader/nz-cascader.spec.ts
index d5a1a13c44e..54c1002f5ae 100644
--- a/components/cascader/nz-cascader.spec.ts
+++ b/components/cascader/nz-cascader.spec.ts
@@ -5,7 +5,13 @@ import { async, fakeAsync, flush, inject, tick, TestBed } from '@angular/core/te
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { createFakeEvent, createMouseEvent, dispatchEvent, dispatchKeyboardEvent, dispatchMouseEvent } from '../core/testing';
+import {
+  createFakeEvent,
+  createMouseEvent,
+  dispatchEvent,
+  dispatchKeyboardEvent,
+  dispatchMouseEvent
+} from '../core/testing';
 
 // import { NzDemoCascaderBasicComponent } from './demo/basic';
 import { NzCascaderComponent } from './nz-cascader.component';
@@ -96,7 +102,7 @@ describe('cascader', () => {
       fixture.detectChanges();
       expect(cascader.nativeElement.querySelector('.ant-cascader-picker-label').innerText).toBe('');
       expect(testComponent.cascader.getSubmitValue().join(',')).toBe('');
-      testComponent.values = [1, 2, 3];
+      testComponent.values = [ 1, 2, 3 ];
       fixture.detectChanges();
       flush();
       fixture.detectChanges();
@@ -109,7 +115,7 @@ describe('cascader', () => {
       fixture.detectChanges();
       expect(cascader.nativeElement.querySelector('.ant-cascader-picker-label').innerText).toBe('');
       expect(testComponent.cascader.getSubmitValue().join(',')).toBe('');
-      testComponent.values = ['zhejiang', 'hangzhou', 'xihu'];
+      testComponent.values = [ 'zhejiang', 'hangzhou', 'xihu' ];
       fixture.detectChanges();
       flush();
       fixture.detectChanges();
@@ -129,7 +135,7 @@ describe('cascader', () => {
     it('should allowClear work', () => {
       fixture.detectChanges();
       const input: HTMLElement = cascader.nativeElement.querySelector('.ant-cascader-input');
-      testComponent.values = ['zhejiang', 'hangzhou', 'xihu'];
+      testComponent.values = [ 'zhejiang', 'hangzhou', 'xihu' ];
       fixture.detectChanges();
       expect(cascader.nativeElement.querySelector('.ant-cascader-picker-clear')).toBeDefined();
       testComponent.nzAllowClear = false;
@@ -244,7 +250,7 @@ describe('cascader', () => {
     }));
     it('should mouse hover toggle open immediately', fakeAsync(() => {
       fixture.detectChanges();
-      testComponent.nzTriggerAction = ['hover'];
+      testComponent.nzTriggerAction = [ 'hover' ];
       testComponent.nzMouseEnterDelay = 0;
       testComponent.nzMouseLeaveDelay = 0;
       fixture.detectChanges();
@@ -265,7 +271,7 @@ describe('cascader', () => {
     it('should clear timer on option mouseenter and mouseleave', fakeAsync(() => {
       const mouseenter = createMouseEvent('mouseenter');
       const mouseleave = createMouseEvent('mouseleave');
-      const option = options1[0]; // zhejiang
+      const option = options1[ 0 ]; // zhejiang
 
       testComponent.nzExpandTrigger = 'hover';
       fixture.detectChanges();
@@ -358,7 +364,7 @@ describe('cascader', () => {
       expect(testComponent.onVisibleChange).toHaveBeenCalledTimes(1);
     }));
     it('should mouse leave not work when menu not open', fakeAsync(() => {
-      testComponent.nzTriggerAction = ['hover'];
+      testComponent.nzTriggerAction = [ 'hover' ];
       fixture.detectChanges();
       expect(testComponent.cascader.isMenuVisible()).toBe(false);
       dispatchMouseEvent(cascader.nativeElement, 'mouseleave');
@@ -371,7 +377,7 @@ describe('cascader', () => {
     it('should clear value work', fakeAsync(() => {
       fixture.detectChanges();
       testComponent.nzAllowClear = true;
-      testComponent.values = ['zhejiang', 'hangzhou', 'xihu'];
+      testComponent.values = [ 'zhejiang', 'hangzhou', 'xihu' ];
       fixture.detectChanges();
       flush();
       expect(testComponent.values.length).toBe(3);
@@ -382,7 +388,7 @@ describe('cascader', () => {
     }));
     it('should clear value work 2', fakeAsync(() => {
       fixture.detectChanges();
-      testComponent.values = ['zhejiang', 'hangzhou', 'xihu'];
+      testComponent.values = [ 'zhejiang', 'hangzhou', 'xihu' ];
       fixture.detectChanges();
       flush();
       expect(testComponent.values.length).toBe(3);
@@ -470,7 +476,7 @@ describe('cascader', () => {
       fixture.detectChanges();
       expect(cascader.nativeElement.querySelector('.ant-cascader-input')).toBeNull();
       testComponent.nzAllowClear = true;
-      testComponent.values = ['zhejiang', 'hangzhou', 'xihu'];
+      testComponent.values = [ 'zhejiang', 'hangzhou', 'xihu' ];
       fixture.detectChanges();
       flush();
       fixture.detectChanges();
@@ -489,7 +495,7 @@ describe('cascader', () => {
     it('should create label work', fakeAsync(() => {
       fixture.detectChanges();
       expect(cascader.nativeElement.querySelector('.ant-cascader-picker-label').innerText).toBe('');
-      testComponent.values = ['zhejiang', 'hangzhou', 'xihu'];
+      testComponent.values = [ 'zhejiang', 'hangzhou', 'xihu' ];
       fixture.detectChanges();
       flush();
       fixture.detectChanges();
@@ -498,7 +504,15 @@ describe('cascader', () => {
     it('should label template work', fakeAsync(() => {
       fixture.detectChanges();
       expect(cascader.nativeElement.querySelector('.ant-cascader-picker-label').innerText).toBe('');
-      testComponent.values = ['zhejiang', 'hangzhou', 'xihu'];
+      testComponent.values = [ 'zhejiang', 'hangzhou', 'xihu' ];
+      testComponent.nzLabelRender = testComponent.renderTpl;
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+      expect(cascader.nativeElement.querySelector('.ant-cascader-picker-label').innerText.trim()).toBe('Zhejiang | Hangzhou | West Lake');
+      // fix clear
+      testComponent.clearSelection();
+      testComponent.values = [ 'zhejiang', 'hangzhou', 'xihu' ];
       testComponent.nzLabelRender = testComponent.renderTpl;
       fixture.detectChanges();
       flush();
@@ -522,49 +536,49 @@ describe('cascader', () => {
       control.writeValue('');
       fixture.detectChanges();
       expect(control.getSubmitValue().length).toBe(1);
-      expect(control.getSubmitValue()[0]).toBe('');
-      control.writeValue(['zhejiang']);
+      expect(control.getSubmitValue()[ 0 ]).toBe('');
+      control.writeValue([ 'zhejiang' ]);
       fixture.detectChanges();
       expect(control.getSubmitValue().length).toBe(1);
-      expect(control.getSubmitValue()[0]).toBe('zhejiang');
-      control.writeValue(['zhejiang', 'hangzhou', 'xihu']);
+      expect(control.getSubmitValue()[ 0 ]).toBe('zhejiang');
+      control.writeValue([ 'zhejiang', 'hangzhou', 'xihu' ]);
       fixture.detectChanges();
       expect(control.getSubmitValue().length).toBe(3);
       const values = control.getSubmitValue();
-      expect(values[0]).toBe('zhejiang');
-      expect(values[1]).toBe('hangzhou');
-      expect(values[2]).toBe('xihu');
+      expect(values[ 0 ]).toBe('zhejiang');
+      expect(values[ 1 ]).toBe('hangzhou');
+      expect(values[ 2 ]).toBe('xihu');
       control.writeValue([
-        {value: 'zhejiang', text: 'Zj'}, {value: 'hangzhou', text: 'Hz'}, {value: 'xihu', text: 'Xh'}
+        { value: 'zhejiang', text: 'Zj' }, { value: 'hangzhou', text: 'Hz' }, { value: 'xihu', text: 'Xh' }
       ]);
       fixture.detectChanges();
       expect(control.getSubmitValue().length).toBe(3);
       const values2 = control.getSubmitValue();
-      expect(values2[0]).toBe('zhejiang');
-      expect(values2[1]).toBe('hangzhou');
-      expect(values2[2]).toBe('xihu');
+      expect(values2[ 0 ]).toBe('zhejiang');
+      expect(values2[ 1 ]).toBe('hangzhou');
+      expect(values2[ 2 ]).toBe('xihu');
       expect(control.labelRenderText).toBe('Zhejiang / Hangzhou / West Lake');
 
       testComponent.nzOptions = []; // empty collection
       fixture.detectChanges();
-      control.writeValue(['zhejiang', 'hangzhou', 'xihu']); // so these values are not match
+      control.writeValue([ 'zhejiang', 'hangzhou', 'xihu' ]); // so these values are not match
       fixture.detectChanges();
       expect(control.getSubmitValue().length).toBe(3);
       const values3 = control.getSubmitValue();
-      expect(values3[0]).toBe('zhejiang');
-      expect(values3[1]).toBe('hangzhou');
-      expect(values3[2]).toBe('xihu');
+      expect(values3[ 0 ]).toBe('zhejiang');
+      expect(values3[ 1 ]).toBe('hangzhou');
+      expect(values3[ 2 ]).toBe('xihu');
       expect(control.labelRenderText).toBe('zhejiang / hangzhou / xihu');
 
       control.writeValue([
-        {value: 'zhejiang', label: 'ZJ'}, {value: 'hangzhou', label: 'HZ'}, {value: 'xihu', label: 'XH'}
+        { value: 'zhejiang', label: 'ZJ' }, { value: 'hangzhou', label: 'HZ' }, { value: 'xihu', label: 'XH' }
       ]); // so these values are not match
       fixture.detectChanges();
       expect(control.getSubmitValue().length).toBe(3);
       const values4 = control.getSubmitValue();
-      expect(values4[0]).toBe('zhejiang');
-      expect(values4[1]).toBe('hangzhou');
-      expect(values4[2]).toBe('xihu');
+      expect(values4[ 0 ]).toBe('zhejiang');
+      expect(values4[ 1 ]).toBe('hangzhou');
+      expect(values4[ 2 ]).toBe('xihu');
       expect(control.labelRenderText).toBe('ZJ / HZ / XH');
     }));
     it('should write value work on setting `nzOptions` asyn', fakeAsync(() => {
@@ -584,23 +598,23 @@ describe('cascader', () => {
       control.writeValue('');
       fixture.detectChanges();
       expect(control.getSubmitValue().length).toBe(1);
-      expect(control.getSubmitValue()[0]).toBe('');
+      expect(control.getSubmitValue()[ 0 ]).toBe('');
 
-      control.writeValue(['zhejiang']);
+      control.writeValue([ 'zhejiang' ]);
       fixture.detectChanges();
       expect(control.getSubmitValue().length).toBe(1);
-      expect(control.getSubmitValue()[0]).toBe('zhejiang');
+      expect(control.getSubmitValue()[ 0 ]).toBe('zhejiang');
       expect(control.labelRenderText).toBe('zhejiang');
       testComponent.nzOptions = options1; // update the nzOptions like asyn
       fixture.detectChanges();
       expect(control.getSubmitValue().length).toBe(1);
-      expect(control.getSubmitValue()[0]).toBe('zhejiang');
+      expect(control.getSubmitValue()[ 0 ]).toBe('zhejiang');
       expect(control.labelRenderText).toBe('Zhejiang');
     }));
     it('should write value work on setting `nzOptions` asyn (match)', fakeAsync(() => {
       const control = testComponent.cascader;
       testComponent.nzOptions = null;
-      testComponent.values = ['zhejiang', 'hangzhou', 'xihu'];
+      testComponent.values = [ 'zhejiang', 'hangzhou', 'xihu' ];
       fixture.detectChanges();
       flush(); // force value to be write
       fixture.detectChanges();
@@ -609,15 +623,15 @@ describe('cascader', () => {
       testComponent.nzOptions = options1; // update the nzOptions like asyn
       fixture.detectChanges();
       const values = control.getSubmitValue();
-      expect(values[0]).toBe('zhejiang');
-      expect(values[1]).toBe('hangzhou');
-      expect(values[2]).toBe('xihu');
+      expect(values[ 0 ]).toBe('zhejiang');
+      expect(values[ 1 ]).toBe('hangzhou');
+      expect(values[ 2 ]).toBe('xihu');
       expect(control.labelRenderText).toBe('Zhejiang / Hangzhou / West Lake');
     }));
     it('should write value work on setting `nzOptions` asyn (not match)', fakeAsync(() => {
       const control = testComponent.cascader;
       testComponent.nzOptions = null;
-      testComponent.values = ['zhejiang2', 'hangzhou2', 'xihu2'];
+      testComponent.values = [ 'zhejiang2', 'hangzhou2', 'xihu2' ];
       fixture.detectChanges();
       flush(); // force value to be write
       fixture.detectChanges();
@@ -626,9 +640,9 @@ describe('cascader', () => {
       testComponent.nzOptions = options1; // update the nzOptions like asyn
       fixture.detectChanges();            // but still the values is not match
       const values = control.getSubmitValue();
-      expect(values[0]).toBe('zhejiang2');
-      expect(values[1]).toBe('hangzhou2');
-      expect(values[2]).toBe('xihu2');
+      expect(values[ 0 ]).toBe('zhejiang2');
+      expect(values[ 1 ]).toBe('hangzhou2');
+      expect(values[ 2 ]).toBe('xihu2');
       expect(control.labelRenderText).toBe('zhejiang2 / hangzhou2 / xihu2');
     }));
     it('should click option to expand', () => {
@@ -669,7 +683,7 @@ describe('cascader', () => {
     });
     it('should click option to change column count 2', fakeAsync(() => {
       const LEFT_ARROW = 37;
-      testComponent.values = ['zhejiang', 'hangzhou', 'xihu'];
+      testComponent.values = [ 'zhejiang', 'hangzhou', 'xihu' ];
       fixture.detectChanges();
       cascader.nativeElement.click();
       fixture.detectChanges();
@@ -852,7 +866,7 @@ describe('cascader', () => {
     it('should navigate left when press LEFT_ARROW', fakeAsync(() => {
       const LEFT_ARROW = 37;
       fixture.detectChanges();
-      testComponent.values = ['zhejiang', 'hangzhou', 'xihu'];
+      testComponent.values = [ 'zhejiang', 'hangzhou', 'xihu' ];
       testComponent.cascader.setMenuVisible(true);
       fixture.detectChanges();
       flush(); // wait for cdk-overlay to open
@@ -912,9 +926,9 @@ describe('cascader', () => {
 
       expect(testComponent.values).toBeDefined();
       expect(testComponent.values.length).toBe(3);
-      expect(testComponent.values[0]).toBe('zhejiang');
-      expect(testComponent.values[1]).toBe('hangzhou');
-      expect(testComponent.values[2]).toBe('xihu');
+      expect(testComponent.values[ 0 ]).toBe('zhejiang');
+      expect(testComponent.values[ 1 ]).toBe('hangzhou');
+      expect(testComponent.values[ 2 ]).toBe('xihu');
       flush(); // wait for cdk-overlay to close
       fixture.detectChanges();
       expect(testComponent.cascader.isMenuVisible()).toBe(false);
@@ -986,7 +1000,7 @@ describe('cascader', () => {
       const Z = 90;
       const ZERO = 48;
       const NINE = 57;
-      const keys = [PAGE_UP, PAGE_DOWN, TAB, HOME, END, SPACE, COMMA, DELETE];
+      const keys = [ PAGE_UP, PAGE_DOWN, TAB, HOME, END, SPACE, COMMA, DELETE ];
       for (let k = A; k <= Z; k++) {
         keys.push(k);
       }
@@ -1068,9 +1082,9 @@ describe('cascader', () => {
       fixture.detectChanges();
       expect(testComponent.values).toBeDefined();
       expect(testComponent.values.length).toBe(3);
-      expect(testComponent.values[0]).toBe('zhejiang');
-      expect(testComponent.values[1]).toBe('hangzhou');
-      expect(testComponent.values[2]).toBe('xihu');
+      expect(testComponent.values[ 0 ]).toBe('zhejiang');
+      expect(testComponent.values[ 1 ]).toBe('hangzhou');
+      expect(testComponent.values[ 2 ]).toBe('xihu');
       flush(); // wait for cdk-overlay to close
       fixture.detectChanges();
       expect(overlayContainerElement.querySelectorAll('.ant-cascader-menu').length).toBe(0); // 0列
@@ -1127,7 +1141,7 @@ describe('cascader', () => {
       expect(overlayContainerElement.querySelectorAll('.ant-cascader-menu').length).toBe(2); // 2列
       expect(testComponent.values).toBeDefined();
       expect(testComponent.values.length).toBe(1);
-      expect(testComponent.values[0]).toBe('zhejiang');
+      expect(testComponent.values[ 0 ]).toBe('zhejiang');
 
       const itemEl2 = overlayContainerElement.querySelector('.ant-cascader-menu:nth-child(2) .ant-cascader-menu-item:nth-child(1)') as HTMLElement; // 第2列第1个
       expect(itemEl1.classList).toContain('ant-cascader-menu-item-active');
@@ -1141,8 +1155,8 @@ describe('cascader', () => {
       expect(overlayContainerElement.querySelectorAll('.ant-cascader-menu').length).toBe(3); // 3列
       expect(testComponent.values).toBeDefined();
       expect(testComponent.values.length).toBe(2);
-      expect(testComponent.values[0]).toBe('zhejiang');
-      expect(testComponent.values[1]).toBe('hangzhou');
+      expect(testComponent.values[ 0 ]).toBe('zhejiang');
+      expect(testComponent.values[ 1 ]).toBe('hangzhou');
 
       const itemEl3 = overlayContainerElement.querySelector('.ant-cascader-menu:nth-child(3) .ant-cascader-menu-item:nth-child(1)') as HTMLElement; // 第3列第1个
       expect(itemEl1.classList).toContain('ant-cascader-menu-item-active');
@@ -1155,9 +1169,9 @@ describe('cascader', () => {
 
       expect(testComponent.values).toBeDefined();
       expect(testComponent.values.length).toBe(3);
-      expect(testComponent.values[0]).toBe('zhejiang');
-      expect(testComponent.values[1]).toBe('hangzhou');
-      expect(testComponent.values[2]).toBe('xihu');
+      expect(testComponent.values[ 0 ]).toBe('zhejiang');
+      expect(testComponent.values[ 1 ]).toBe('hangzhou');
+      expect(testComponent.values[ 2 ]).toBe('xihu');
       flush(); // wait for cdk-overlay to close
       fixture.detectChanges();
       expect(overlayContainerElement.querySelectorAll('.ant-cascader-menu').length).toBe(0); // 0列
@@ -1188,7 +1202,7 @@ describe('cascader', () => {
       expect(overlayContainerElement.querySelectorAll('.ant-cascader-menu').length).toBe(2); // 2列
       expect(testComponent.values).toBeDefined();
       expect(testComponent.values.length).toBe(1);
-      expect(testComponent.values[0]).toBe('zhejiang');
+      expect(testComponent.values[ 0 ]).toBe('zhejiang');
 
       const itemEl2 = overlayContainerElement.querySelector('.ant-cascader-menu:nth-child(2) .ant-cascader-menu-item:nth-child(1)') as HTMLElement; // 第2列第1个
       expect(itemEl1.classList).toContain('ant-cascader-menu-item-active');
@@ -1204,8 +1218,8 @@ describe('cascader', () => {
       expect(overlayContainerElement.querySelectorAll('.ant-cascader-menu').length).toBe(3); // 3列
       expect(testComponent.values).toBeDefined();
       expect(testComponent.values.length).toBe(2);
-      expect(testComponent.values[0]).toBe('zhejiang');
-      expect(testComponent.values[1]).toBe('hangzhou');
+      expect(testComponent.values[ 0 ]).toBe('zhejiang');
+      expect(testComponent.values[ 1 ]).toBe('hangzhou');
 
       const itemEl3 = overlayContainerElement.querySelector('.ant-cascader-menu:nth-child(3) .ant-cascader-menu-item:nth-child(1)') as HTMLElement; // 第3列第1个
       expect(itemEl1.classList).toContain('ant-cascader-menu-item-active');
@@ -1218,8 +1232,8 @@ describe('cascader', () => {
 
       expect(testComponent.values).toBeDefined();
       expect(testComponent.values.length).toBe(2);
-      expect(testComponent.values[0]).toBe('zhejiang');
-      expect(testComponent.values[1]).toBe('hangzhou');
+      expect(testComponent.values[ 0 ]).toBe('zhejiang');
+      expect(testComponent.values[ 1 ]).toBe('hangzhou');
 
       itemEl3.click();
       fixture.detectChanges();
@@ -1228,9 +1242,9 @@ describe('cascader', () => {
 
       expect(testComponent.values).toBeDefined();
       expect(testComponent.values.length).toBe(3);
-      expect(testComponent.values[0]).toBe('zhejiang');
-      expect(testComponent.values[1]).toBe('hangzhou');
-      expect(testComponent.values[2]).toBe('xihu');
+      expect(testComponent.values[ 0 ]).toBe('zhejiang');
+      expect(testComponent.values[ 1 ]).toBe('hangzhou');
+      expect(testComponent.values[ 2 ]).toBe('xihu');
       flush(); // wait for cdk-overlay to close
       fixture.detectChanges();
       expect(overlayContainerElement.querySelectorAll('.ant-cascader-menu').length).toBe(0); // 0列
@@ -1265,7 +1279,7 @@ describe('cascader', () => {
       itemEl2 = overlayContainerElement.querySelector('.ant-cascader-menu:nth-child(1) .ant-cascader-menu-item:nth-child(2)') as HTMLElement; // 第1列第2个
       expect(testComponent.values).toBeDefined();
       expect(testComponent.values.length).toBe(1);
-      expect(testComponent.values[0]).toBe('zhejiang');
+      expect(testComponent.values[ 0 ]).toBe('zhejiang');
     }));
     it('should position change correct', () => {
       const fakeTopEvent = {
@@ -1385,14 +1399,14 @@ describe('cascader', () => {
       expect(testComponent.addCallTimes).toHaveBeenCalledTimes(4);
       expect(testComponent.values).toBeDefined();
       expect(testComponent.values.length).toBe(3);
-      expect(testComponent.values[0]).toBe('zhejiang');
-      expect(testComponent.values[1]).toBe('hangzhou');
-      expect(testComponent.values[2]).toBe('xihu');
+      expect(testComponent.values[ 0 ]).toBe('zhejiang');
+      expect(testComponent.values[ 1 ]).toBe('hangzhou');
+      expect(testComponent.values[ 2 ]).toBe('xihu');
     }));
 
     it('should LOAD DATA work when specifies default value', fakeAsync(() => {
       spyOn(testComponent, 'addCallTimes');
-      testComponent.values = ['zhejiang', 'hangzhou', 'xihu'];
+      testComponent.values = [ 'zhejiang', 'hangzhou', 'xihu' ];
       fixture.detectChanges();
       tick(3000);
       fixture.detectChanges();
@@ -1404,120 +1418,120 @@ describe('cascader', () => {
   });
 });
 
-const ID_NAME_LIST = [{
-  id: 1,
-  name: 'Zhejiang',
-  children: [{
-    id: 2,
-    name: 'Hangzhou',
-    children: [{
-      id: 3,
-      name: 'West Lake',
+const ID_NAME_LIST = [ {
+  id      : 1,
+  name    : 'Zhejiang',
+  children: [ {
+    id      : 2,
+    name    : 'Hangzhou',
+    children: [ {
+      id    : 3,
+      name  : 'West Lake',
       isLeaf: true
-    }]
-  }]
-}];
-
-const options1 = [{
-  value: 'zhejiang',
-  label: 'Zhejiang',
-  children: [{
-    value: 'hangzhou',
-    label: 'Hangzhou',
-    children: [{
-      value: 'xihu',
-      label: 'West Lake',
+    } ]
+  } ]
+} ];
+
+const options1 = [ {
+  value   : 'zhejiang',
+  label   : 'Zhejiang',
+  children: [ {
+    value   : 'hangzhou',
+    label   : 'Hangzhou',
+    children: [ {
+      value : 'xihu',
+      label : 'West Lake',
       isLeaf: true
-    }]
+    } ]
   }, {
-    value: 'ningbo',
-    label: 'Ningbo',
+    value : 'ningbo',
+    label : 'Ningbo',
     isLeaf: true
-  }]
+  } ]
 }, {
-  value: 'jiangsu',
-  label: 'Jiangsu',
-  children: [{
-    value: 'nanjing',
-    label: 'Nanjing',
-    children: [{
-      value: 'zhonghuamen',
-      label: 'Zhong Hua Men',
+  value   : 'jiangsu',
+  label   : 'Jiangsu',
+  children: [ {
+    value   : 'nanjing',
+    label   : 'Nanjing',
+    children: [ {
+      value : 'zhonghuamen',
+      label : 'Zhong Hua Men',
       isLeaf: true
-    }]
-  }]
-}];
-
-const options2 = [{
-  value: 'option1',
-  label: 'Option1',
-  children: [{
-    value: 'option11',
-    label: 'Option11',
+    } ]
+  } ]
+} ];
+
+const options2 = [ {
+  value   : 'option1',
+  label   : 'Option1',
+  children: [ {
+    value   : 'option11',
+    label   : 'Option11',
     disabled: true,
-    isLeaf: true
+    isLeaf  : true
   }, {
-    value: 'option12',
-    label: 'Option12',
+    value : 'option12',
+    label : 'Option12',
     isLeaf: true
   }, {
-    value: 'option13',
-    label: 'Option13',
+    value   : 'option13',
+    label   : 'Option13',
     disabled: true,
-    isLeaf: true
+    isLeaf  : true
   }, {
-    value: 'option14',
-    label: 'Option14',
+    value : 'option14',
+    label : 'Option14',
     isLeaf: true
-  }]
+  } ]
 }, {
-  value: 'option2',
-  label: 'Option2',
+  value   : 'option2',
+  label   : 'Option2',
   disabled: true,
-  children: [{
-    value: 'option21',
-    label: 'Option21',
+  children: [ {
+    value : 'option21',
+    label : 'Option21',
     isLeaf: true
   }, {
-    value: 'option22',
-    label: 'Option22',
+    value : 'option22',
+    label : 'Option22',
     isLeaf: true
-  }]
-}];
-
-const options3 = [{
-  value: 'zhejiang',
-  label: 'Zhejiang',
-  children: [{
-    value: 'hangzhou',
-    label: 'Hangzhou',
-    children: [{
-      value: 'xihu',
-      label: 'West Lake',
+  } ]
+} ];
+
+const options3 = [ {
+  value   : 'zhejiang',
+  label   : 'Zhejiang',
+  children: [ {
+    value   : 'hangzhou',
+    label   : 'Hangzhou',
+    children: [ {
+      value : 'xihu',
+      label : 'West Lake',
       isLeaf: true
-    }]
+    } ]
   }, {
-    value: 'ningbo',
-    label: 'Ningbo',
+    value : 'ningbo',
+    label : 'Ningbo',
     isLeaf: true
-  }]
+  } ]
 }, {
-  value: 'jiangsu',
-  label: 'Jiangsu',
-  children: [{
-    value: 'nanjing',
-    label: 'Nanjing',
-    children: [{
-      value: 'zhonghuamen',
-      label: 'Zhong Hua Men',
+  value   : 'jiangsu',
+  label   : 'Jiangsu',
+  children: [ {
+    value   : 'nanjing',
+    label   : 'Nanjing',
+    children: [ {
+      value : 'zhonghuamen',
+      label : 'Zhong Hua Men',
       isLeaf: true
-    }]
+    } ]
   }, {
-    value: 'suzhou',
-    label: 'Suzhou',
+    value : 'suzhou',
+    label : 'Suzhou',
     isLeaf: true
-  }]
-}];
+  } ]
+} ];
 
 @Component({
   selector: 'nz-demo-cascader-default',
@@ -1554,12 +1568,12 @@ const options3 = [{
         {{label}}{{isLast ? '' : ' | '}}
       </ng-container>
     </ng-template>
-    `,
+  `,
   styles  : [
-    `
-    .ant-cascader-picker {
-      width: 300px;
-    }
+      `
+      .ant-cascader-picker {
+        width: 300px;
+      }
     `
   ]
 })
@@ -1597,6 +1611,10 @@ export class NzDemoCascaderDefaultComponent {
   fakeChangeOn = (node: any, index: number): boolean => {
     return node.value === 'zhejiang';
   }
+
+  clearSelection(): void {
+    this.cascader.clearSelection();
+  }
 }
 
 @Component({
@@ -1609,12 +1627,12 @@ export class NzDemoCascaderDefaultComponent {
       (ngModelChange)="onValueChanges($event)"
       (nzVisibleChange)="onVisibleChange($event)">
     </nz-cascader>
-    `,
+  `,
   styles  : [
-    `
-    .ant-cascader-picker {
-      width: 300px;
-    }
+      `
+      .ant-cascader-picker {
+        width: 300px;
+      }
     `
   ]
 })
@@ -1629,22 +1647,22 @@ export class NzDemoCascaderLoadDataComponent {
     return new Promise((resolve, reject) => {
       setTimeout(() => {
         if (index < 0) { // if index less than 0 it is root node
-          node.children = [{
+          node.children = [ {
             value: 'zhejiang',
             label: 'Zhejiang'
-          }];
+          } ];
           resolve();
         } else if (index === 0) {
-          node.children = [{
+          node.children = [ {
             value: 'hangzhou',
             label: 'Hangzhou'
-          }];
+          } ];
           resolve();
         } else if (index === 1) {
-          node.children = [{
+          node.children = [ {
             value: 'xihu',
             label: 'West Lake'
-          }];
+          } ];
           resolve();
         } else {
           reject();