fix(carousel): resize content after window resized (NG-ZORRO#1815)

close NG-ZORRO#1811
hsuanxyz · Jul 22, 2018 · b135f5b · b135f5b
1 parent bf3c2f7
commit b135f5b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/components/carousel/nz-carousel.component.ts b/components/carousel/nz-carousel.component.ts
@@ -6,6 +6,7 @@ import {
   ElementRef,
   EventEmitter,
   HostBinding,
+  HostListener,
   Input,
   OnDestroy,
   Output,
@@ -72,6 +73,11 @@ export class NzCarouselComponent implements AfterViewInit, OnDestroy, AfterConte
   @Output() nzAfterChange: EventEmitter<number> = new EventEmitter();
   @Output() nzBeforeChange: EventEmitter<{ from: number; to: number }> = new EventEmitter();
 
+  @HostListener('window:resize', [ '$event' ])
+  onWindowResize(e: UIEvent): void {
+    this.renderContent();
+  }
+
   get nextIndex(): number {
     return this.activeIndex < this.slideContents.length - 1 ? (this.activeIndex + 1) : 0;
   }

diff --git a/components/carousel/nz-carousel.spec.ts b/components/carousel/nz-carousel.spec.ts
@@ -152,6 +152,12 @@ describe('carousel', () => {
       fixture.detectChanges();
       expect(carouselContents[ 2 ].nativeElement.classList).toContain('slick-active');
     });
+    it('should resize content after window resized', fakeAsync(() => {
+      const resizeSpy = spyOn(testComponent.nzCarouselComponent, 'renderContent');
+      window.dispatchEvent(new Event('resize'));
+      tick(200);
+      expect(resizeSpy).toHaveBeenCalled();
+    }));
   });
 });