From 44865c21c1039584d87b1f883a08f0b691b49e13 Mon Sep 17 00:00:00 2001
From: VTHINKXIE <vthinkxie@users.noreply.github.com>
Date: Fri, 18 Aug 2017 11:20:41 +0900
Subject: [PATCH] fix(module:carousel): support dynamic change of
 nz-carousel-content (#60)

closes #56
---
 .../carousel/nz-carousel-content.directive.ts | 12 ++++++--
 .../carousel/nz-carousel.component.ts         | 28 ++++++++++++++++---
 .../nz-demo-carousel-auto.component.ts        | 11 +++++---
 .../nz-demo-carousel-basic.component.ts       | 11 +++++---
 .../nz-demo-carousel-fade.component.ts        | 10 +++----
 .../nz-demo-carousel-vertical.component.ts    | 11 +++++---
 6 files changed, 60 insertions(+), 23 deletions(-)

diff --git a/src/components/carousel/nz-carousel-content.directive.ts b/src/components/carousel/nz-carousel-content.directive.ts
index e9fec5811a9..eb0658cc2be 100755
--- a/src/components/carousel/nz-carousel-content.directive.ts
+++ b/src/components/carousel/nz-carousel-content.directive.ts
@@ -1,7 +1,9 @@
 import {
   Directive,
-  HostBinding
+  HostBinding,
+  ElementRef
 } from '@angular/core';
+
 @Directive({
   selector: '[nz-carousel-content]',
 })
@@ -10,7 +12,9 @@ export class NzCarouselContentDirective {
   isActive = false;
   left = null;
   top = null;
-  fadeMode = false;
+  fadeMode = false
+  nativeElement: HTMLElement;
+
 
   @HostBinding('class.slick-slide') _nzSlickSlide = true;
 
@@ -48,4 +52,8 @@ export class NzCarouselContentDirective {
     }
   }
 
+  constructor(private _el: ElementRef) {
+    this.nativeElement = this._el.nativeElement;
+  }
+
 }
diff --git a/src/components/carousel/nz-carousel.component.ts b/src/components/carousel/nz-carousel.component.ts
index cca79dd30a2..012e2e42e61 100755
--- a/src/components/carousel/nz-carousel.component.ts
+++ b/src/components/carousel/nz-carousel.component.ts
@@ -37,7 +37,14 @@ export class NzCarouselComponent implements AfterViewInit, OnDestroy {
   activeIndex = 0;
   transform = 'translate3d(0px, 0px, 0px)';
   interval;
-  @ContentChildren(NzCarouselContentDirective) slideContents;
+  slideContents;
+
+  @ContentChildren(NzCarouselContentDirective)
+  set _slideContents(value) {
+    this.slideContents = value;
+    this.renderContent();
+  }
+
   @ViewChild('slickList') slickList: ElementRef;
   @ViewChild('slickTrack') slickTrack: ElementRef;
   @Input() nzAutoPlay = false;
@@ -67,8 +74,14 @@ export class NzCarouselComponent implements AfterViewInit, OnDestroy {
   }
 
   ngAfterViewInit() {
+    this.renderContent();
+  }
+
+  renderContent() {
     setTimeout(_ => {
-      this.slideContents.first.isActive = true;
+      if (this.slideContents.first) {
+        this.slideContents.first.isActive = true;
+      }
       this.slideContents.forEach((content, i) => {
         content.width = this.hostElement.nativeElement.offsetWidth;
         if (this.nzEffect === 'fade') {
@@ -83,14 +96,21 @@ export class NzCarouselComponent implements AfterViewInit, OnDestroy {
       if (this.nzAutoPlay) {
         this.createInterval();
       }
-      this._renderer.setStyle(this.slickList.nativeElement, 'height', `${this.hostElement.nativeElement.offsetHeight}px`);
+
       if (this.nzVertical) {
+        this._renderer.removeStyle(this.slickList.nativeElement, 'height');
+        if (this.slideContents.first) {
+          this._renderer.setStyle(this.slickList.nativeElement, 'height', `${this.slideContents.first.nativeElement.offsetHeight}px`);
+        }
+        this._renderer.removeStyle(this.slickTrack.nativeElement, 'height');
         this._renderer.setStyle(this.slickTrack.nativeElement, 'height', `${this.slideContents.length * this.hostElement.nativeElement.offsetHeight}px`);
       } else {
+        this._renderer.removeStyle(this.slickList.nativeElement, 'height');
+        this._renderer.setStyle(this.slickList.nativeElement, 'height', `${this.hostElement.nativeElement.offsetHeight}px`);
+        this._renderer.removeStyle(this.slickTrack.nativeElement, 'width');
         this._renderer.setStyle(this.slickTrack.nativeElement, 'width', `${this.slideContents.length * this.hostElement.nativeElement.offsetWidth}px`);
       }
     })
-
   }
 
   createInterval() {
diff --git a/src/showcase/nz-demo-carousel/nz-demo-carousel-auto.component.ts b/src/showcase/nz-demo-carousel/nz-demo-carousel-auto.component.ts
index 6572392ee4b..961bf763b9a 100644
--- a/src/showcase/nz-demo-carousel/nz-demo-carousel-auto.component.ts
+++ b/src/showcase/nz-demo-carousel/nz-demo-carousel-auto.component.ts
@@ -1,12 +1,10 @@
 import { Component, OnInit } from '@angular/core';
+
 @Component({
   selector: 'nz-demo-carousel-auto',
   template: `
     <nz-carousel [nzAutoPlay]="true">
-      <div nz-carousel-content><h3>1</h3></div>
-      <div nz-carousel-content><h3>2</h3></div>
-      <div nz-carousel-content><h3>3</h3></div>
-      <div nz-carousel-content><h3>4</h3></div>
+      <div nz-carousel-content *ngFor="let index of array"><h3>{{index}}</h3></div>
     </nz-carousel>`,
   styles  : [
       `:host ::ng-deep .ant-carousel .slick-slide {
@@ -17,6 +15,7 @@ import { Component, OnInit } from '@angular/core';
       color: #fff;
       overflow: hidden;
     }
+
     h3 {
       color: #fff;
     }
@@ -24,10 +23,14 @@ import { Component, OnInit } from '@angular/core';
   ]
 })
 export class NzDemoCarouselAutoComponent implements OnInit {
+  array = [ 1 ];
 
   constructor() {
   }
 
   ngOnInit() {
+    setTimeout(_ => {
+      this.array = [ 1, 2, 3, 4 ];
+    }, 500)
   }
 }
diff --git a/src/showcase/nz-demo-carousel/nz-demo-carousel-basic.component.ts b/src/showcase/nz-demo-carousel/nz-demo-carousel-basic.component.ts
index 0e2241ab5a5..657f9a12c1e 100644
--- a/src/showcase/nz-demo-carousel/nz-demo-carousel-basic.component.ts
+++ b/src/showcase/nz-demo-carousel/nz-demo-carousel-basic.component.ts
@@ -1,12 +1,10 @@
 import { Component, OnInit } from '@angular/core';
+
 @Component({
   selector: 'nz-demo-carousel-basic',
   template: `
     <nz-carousel>
-      <div nz-carousel-content><h3>1</h3></div>
-      <div nz-carousel-content><h3>2</h3></div>
-      <div nz-carousel-content><h3>3</h3></div>
-      <div nz-carousel-content><h3>4</h3></div>
+      <div nz-carousel-content *ngFor="let index of array"><h3>{{index}}</h3></div>
     </nz-carousel>`,
   styles  : [
       `:host ::ng-deep .ant-carousel .slick-slide {
@@ -17,6 +15,7 @@ import { Component, OnInit } from '@angular/core';
       color: #fff;
       overflow: hidden;
     }
+
     h3 {
       color: #fff;
     }
@@ -24,10 +23,14 @@ import { Component, OnInit } from '@angular/core';
   ]
 })
 export class NzDemoCarouselBasicComponent implements OnInit {
+  array = [ 1, 2, 3 ];
 
   constructor() {
   }
 
   ngOnInit() {
+    setTimeout(_ => {
+      this.array = [ 1, 2, 3, 4 ];
+    }, 500)
   }
 }
diff --git a/src/showcase/nz-demo-carousel/nz-demo-carousel-fade.component.ts b/src/showcase/nz-demo-carousel/nz-demo-carousel-fade.component.ts
index 7bfeda13f8d..398ef8e2606 100644
--- a/src/showcase/nz-demo-carousel/nz-demo-carousel-fade.component.ts
+++ b/src/showcase/nz-demo-carousel/nz-demo-carousel-fade.component.ts
@@ -3,10 +3,7 @@ import { Component, OnInit } from '@angular/core';
   selector: 'nz-demo-carousel-fade',
   template: `
     <nz-carousel [nzEffect]="'fade'">
-      <div nz-carousel-content><h3>1</h3></div>
-      <div nz-carousel-content><h3>2</h3></div>
-      <div nz-carousel-content><h3>3</h3></div>
-      <div nz-carousel-content><h3>4</h3></div>
+      <div nz-carousel-content *ngFor="let index of array"><h3>{{index}}</h3></div>
     </nz-carousel>`,
   styles  : [
       `:host ::ng-deep .ant-carousel .slick-slide {
@@ -24,10 +21,13 @@ import { Component, OnInit } from '@angular/core';
   ]
 })
 export class NzDemoCarouselFadeComponent implements OnInit {
-
+  array = [];
   constructor() {
   }
 
   ngOnInit() {
+    setTimeout(_ => {
+      this.array = [ 1, 2, 3, 4 ];
+    }, 500)
   }
 }
diff --git a/src/showcase/nz-demo-carousel/nz-demo-carousel-vertical.component.ts b/src/showcase/nz-demo-carousel/nz-demo-carousel-vertical.component.ts
index ab0e007c8f4..eba122b654f 100644
--- a/src/showcase/nz-demo-carousel/nz-demo-carousel-vertical.component.ts
+++ b/src/showcase/nz-demo-carousel/nz-demo-carousel-vertical.component.ts
@@ -1,12 +1,10 @@
 import { Component, OnInit } from '@angular/core';
+
 @Component({
   selector: 'nz-demo-carousel-vertical',
   template: `
     <nz-carousel [nzVertical]="true">
-      <div nz-carousel-content><h3>1</h3></div>
-      <div nz-carousel-content><h3>2</h3></div>
-      <div nz-carousel-content><h3>3</h3></div>
-      <div nz-carousel-content><h3>4</h3></div>
+      <div nz-carousel-content *ngFor="let index of array"><h3>{{index}}</h3></div>
     </nz-carousel>`,
   styles  : [
       `:host ::ng-deep .ant-carousel .slick-slide {
@@ -17,6 +15,7 @@ import { Component, OnInit } from '@angular/core';
       color: #fff;
       overflow: hidden;
     }
+
     h3 {
       color: #fff;
     }
@@ -24,10 +23,14 @@ import { Component, OnInit } from '@angular/core';
   ]
 })
 export class NzDemoCarouselVerticalComponent implements OnInit {
+  array = [ 1, 2, 3 ]; // try dynamic change the array
 
   constructor() {
   }
 
   ngOnInit() {
+    setTimeout(() => {
+      this.array = [ 1, 2, 3, 4 ];
+    }, 500)
   }
 }