fix(module:carousel): not adapting to new size when resizing (#8374)

* fix(module:carousel): not adapting to new size when resizing

* fix(module:carousel): not adapting to new size when resizing

* fix(module:carousel): not adapting to new size when resizing

Author: ParsaArvanehPA

components/carousel/carousel.component.ts

@@ -32,8 +32,9 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 import { fromEvent, Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
 
+import { NzResizeObserver } from 'ng-zorro-antd/cdk/resize-observer';
 import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
 import { NzDragService, NzResizeService } from 'ng-zorro-antd/core/services';
 import { BooleanInput, NumberInput, NzSafeAny } from 'ng-zorro-antd/core/types';
@@ -182,6 +183,7 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD
     private readonly platform: Platform,
     private readonly resizeService: NzResizeService,
     private readonly nzDragService: NzDragService,
+    private nzResizeObserver: NzResizeObserver,
     @Optional() private directionality: Directionality,
     @Optional() @Inject(NZ_CAROUSEL_CUSTOM_STRATEGIES) private customStrategies: NzCarouselStrategyRegistryItem[]
   ) {
@@ -222,6 +224,13 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD
           });
         });
     });
+
+    this.nzResizeObserver
+      .observe(this.el)
+      .pipe(debounceTime(100), distinctUntilChanged(), takeUntil(this.destroy$))
+      .subscribe(() => {
+        this.layout();
+      });
   }
 
   ngAfterContentInit(): void {

components/carousel/carousel.spec.ts

@@ -1,9 +1,10 @@
 import { BidiModule, Dir } from '@angular/cdk/bidi';
 import { LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
 import { Component, DebugElement, ViewChild } from '@angular/core';
-import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { ComponentFixture, discardPeriodicTasks, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
+import { NzResizeObserver } from 'ng-zorro-antd/cdk/resize-observer';
 import { dispatchKeyboardEvent, dispatchMouseEvent } from 'ng-zorro-antd/core/testing';
 
 import { NzCarouselContentDirective } from './carousel-content.directive';
@@ -76,6 +77,28 @@ describe('carousel', () => {
       ).toBe('A');
     });
 
+    it('should call layout on component resize', fakeAsync(() => {
+      testComponent.nzCarouselComponent.ngOnInit();
+      const spy = spyOn(testComponent.nzCarouselComponent, 'layout');
+      window.dispatchEvent(new Event('resize'));
+      tick(500);
+
+      (testComponent.nzCarouselComponent['nzResizeObserver'] as NzResizeObserver)
+        .observe(testComponent.nzCarouselComponent.el)
+        .subscribe(() => {
+          expect(spy).toHaveBeenCalled();
+        });
+    }));
+
+    it('should call layout on component resize', fakeAsync(() => {
+      const spyOnResize = spyOn(testComponent.nzCarouselComponent, 'layout');
+      window.dispatchEvent(new Event('resize'));
+      tick(500);
+
+      expect(spyOnResize).toHaveBeenCalled();
+      discardPeriodicTasks();
+    }));
+
     it('should click content change', () => {
       expect(carouselContents[0].nativeElement.classList).toContain('slick-active');
       carouselWrapper.nativeElement.querySelector('.slick-dots').lastElementChild.click();