From daa67c198dd2675ea478d5306f1b69abc1493246 Mon Sep 17 00:00:00 2001
From: Wilson Zeng <jackzcs@gmail.com>
Date: Wed, 29 Nov 2017 22:17:28 +0800
Subject: [PATCH] feat(module:slider): support dynamic update nzMarks from
 outside

close #624
---
 .../slider/nz-slider-marks.component.ts       | 22 +++++++++++--------
 .../slider/nz-slider-step.component.ts        | 20 ++++++++++-------
 src/components/slider/nz-slider.component.ts  |  4 +++-
 .../nz-demo-slider-mark.component.ts          | 10 ++++++++-
 4 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/src/components/slider/nz-slider-marks.component.ts b/src/components/slider/nz-slider-marks.component.ts
index 644fa061d36..bf8bdedd9d3 100644
--- a/src/components/slider/nz-slider-marks.component.ts
+++ b/src/components/slider/nz-slider-marks.component.ts
@@ -14,11 +14,11 @@ export class NzSliderMarksComponent implements OnInit, OnChanges {
   // Dynamic properties
   @Input() nzLowerBound: number = null;
   @Input() nzUpperBound: number = null;
+  @Input() nzMarksArray: MarksArray;
 
   // Static properties
   @Input() nzClassName: string;
   @Input() nzVertical: boolean; // Required
-  @Input() nzMarksArray: MarksArray; // Required
   @Input() nzMin: number; // Required
   @Input() nzMax: number; // Required
   @Input() nzIncluded: boolean;
@@ -26,13 +26,22 @@ export class NzSliderMarksComponent implements OnInit, OnChanges {
   attrs; // points for inner use
 
   ngOnChanges(changes: SimpleChanges) {
-    if (changes.nzLowerBound || changes.nzUpperBound) {
+    if (changes.nzMarksArray) {
+      this.buildAttrs();
+    }
+    if (changes.nzMarksArray || changes.nzLowerBound || changes.nzUpperBound) {
       this.togglePointActive();
     }
   }
 
-  ngOnInit() {
-    const { nzVertical, nzClassName, nzMarksArray, nzMin, nzMax, nzLowerBound, nzUpperBound } = this;
+  ngOnInit() {}
+
+  trackById(index: number, attr) {
+    return attr.id;
+  }
+
+  buildAttrs() {
+    const { nzVertical, nzClassName, nzMarksArray, nzMin, nzMax } = this;
     const range = nzMax - nzMin;
     this.attrs = nzMarksArray.map(mark => {
       const { value, offset, config } = mark;
@@ -72,11 +81,6 @@ export class NzSliderMarksComponent implements OnInit, OnChanges {
         label  : label
       };
     }); // END - map
-    this.togglePointActive();
-  }
-
-  trackById(index: number, attr) {
-    return attr.id;
   }
 
   togglePointActive() {
diff --git a/src/components/slider/nz-slider-step.component.ts b/src/components/slider/nz-slider-step.component.ts
index f9bedccd352..98a376eb75d 100644
--- a/src/components/slider/nz-slider-step.component.ts
+++ b/src/components/slider/nz-slider-step.component.ts
@@ -15,22 +15,31 @@ export class NzSliderStepComponent implements OnInit, OnChanges {
   // Dynamic properties
   @Input() nzLowerBound: number = null;
   @Input() nzUpperBound: number = null;
+  @Input() nzMarksArray: any[];
 
   // Static properties
   @Input() nzPrefixCls: string;
   @Input() nzVertical: boolean;
-  @Input() nzMarksArray: any[];
   @Input() nzIncluded: boolean;
 
   attrs;
 
   ngOnChanges(changes: SimpleChanges) {
-    if (changes.nzLowerBound || changes.nzUpperBound) {
+    if (changes.nzMarksArray) {
+      this.buildAttrs();
+    }
+    if (changes.nzMarksArray || changes.nzLowerBound || changes.nzUpperBound) {
       this.togglePointActive();
     }
   }
 
-  ngOnInit() {
+  ngOnInit() {}
+
+  trackById(index: number, attr) {
+    return attr.id;
+  }
+
+  buildAttrs() {
     const orient = this.nzVertical ? 'bottom' : 'left', prefixCls = this.nzPrefixCls;
     this.attrs = this.nzMarksArray.map(mark => {
       const { value, offset } = mark;
@@ -47,11 +56,6 @@ export class NzSliderStepComponent implements OnInit, OnChanges {
         }
       };
     });
-    this.togglePointActive();
-  }
-
-  trackById(index: number, attr) {
-    return attr.id;
   }
 
   togglePointActive() {
diff --git a/src/components/slider/nz-slider.component.ts b/src/components/slider/nz-slider.component.ts
index e0b813db417..dade58d82ca 100644
--- a/src/components/slider/nz-slider.component.ts
+++ b/src/components/slider/nz-slider.component.ts
@@ -250,10 +250,12 @@ export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChange
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    const { nzDisabled } = changes;
+    const { nzDisabled, nzMarks } = changes;
     if (nzDisabled && !nzDisabled.firstChange) {
       this.toggleDragDisabled(nzDisabled.currentValue);
       this.setClassMap();
+    } else if (nzMarks && !nzMarks.firstChange) {
+      this.marksArray = this.nzMarks ? this.toMarksArray(this.nzMarks) : null;
     }
   }
 
diff --git a/src/showcase/nz-demo-slider/nz-demo-slider-mark.component.ts b/src/showcase/nz-demo-slider/nz-demo-slider-mark.component.ts
index bd46e330ec2..e0dd17650ed 100644
--- a/src/showcase/nz-demo-slider/nz-demo-slider-mark.component.ts
+++ b/src/showcase/nz-demo-slider/nz-demo-slider-mark.component.ts
@@ -14,6 +14,7 @@ import { Component } from '@angular/core';
       <h4>step=null || dots=true</h4>
       <nz-slider [nzMarks]="marks" [nzStep]="null" [nzDefaultValue]="37"></nz-slider>
       <nz-slider [nzMarks]="marks" [nzDots]="true" [nzDefaultValue]="37"></nz-slider>
+      Change nzMarks dynamically: <button nz-button (click)="changeMarks()">Change nzMarks</button>
     </div>
   `,
   styles  : [ `
@@ -28,7 +29,7 @@ import { Component } from '@angular/core';
 })
 export class NzDemoSliderMarkComponent {
 
-  marks = {
+  marks: any = {
     0  : '0°C',
     26 : '26°C',
     37 : '37°C',
@@ -40,4 +41,11 @@ export class NzDemoSliderMarkComponent {
     }
   };
 
+  changeMarks() {
+    this.marks = {
+      20: '20%',
+      99: '99%',
+    };
+  }
+
 }