From fc991d180c1c8f006b294b3ab18950ed06e181e8 Mon Sep 17 00:00:00 2001
From: Artur Androsovych <arthurandrosovich@gmail.com>
Date: Fri, 25 Feb 2022 04:13:49 +0200
Subject: [PATCH] perf(module:carousel): do not run change detection when the
 timer fires (#7136)

---
 components/carousel/carousel.component.ts                  | 2 +-
 .../carousel/strategies/experimental/flip-strategy.ts      | 7 +++++--
 components/carousel/typings.ts                             | 3 ++-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/components/carousel/carousel.component.ts b/components/carousel/carousel.component.ts
index d96cf761a8..5bdab0db13 100644
--- a/components/carousel/carousel.component.ts
+++ b/components/carousel/carousel.component.ts
@@ -172,7 +172,7 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD
   constructor(
     elementRef: ElementRef,
     public readonly nzConfigService: NzConfigService,
-    private readonly ngZone: NgZone,
+    public readonly ngZone: NgZone,
     private readonly renderer: Renderer2,
     private readonly cdr: ChangeDetectorRef,
     private readonly platform: Platform,
diff --git a/components/carousel/strategies/experimental/flip-strategy.ts b/components/carousel/strategies/experimental/flip-strategy.ts
index 67a2f5c939..fcb184bd0e 100644
--- a/components/carousel/strategies/experimental/flip-strategy.ts
+++ b/components/carousel/strategies/experimental/flip-strategy.ts
@@ -28,8 +28,11 @@ export class NzCarouselFlipStrategy extends NzCarouselBaseStrategy {
         this.renderer.setStyle(content.el, 'backface-visibility', 'hidden');
       });
 
-      timer(this.carouselComponent!.nzTransitionSpeed).subscribe(() => {
-        this.contents.forEach(c => this.renderer.setStyle(c.el, 'transition', ['transform 500ms ease 0s']));
+      const { carouselComponent } = this;
+      carouselComponent!.ngZone.runOutsideAngular(() => {
+        timer(carouselComponent!.nzTransitionSpeed).subscribe(() => {
+          this.contents.forEach(c => this.renderer.setStyle(c.el, 'transition', ['transform 500ms ease 0s']));
+        });
       });
     }
   }
diff --git a/components/carousel/typings.ts b/components/carousel/typings.ts
index 00a5220bdf..33fef63af7 100644
--- a/components/carousel/typings.ts
+++ b/components/carousel/typings.ts
@@ -4,7 +4,7 @@
  */
 
 import { Direction } from '@angular/cdk/bidi';
-import { InjectionToken, QueryList } from '@angular/core';
+import { InjectionToken, NgZone, QueryList } from '@angular/core';
 
 import { NzCarouselContentDirective } from './carousel-content.directive';
 import { NzCarouselBaseStrategy } from './strategies/base-strategy';
@@ -21,6 +21,7 @@ export interface NzCarouselComponentAsSource {
   slickTrackEl: HTMLElement;
   activeIndex: number;
   dir: Direction;
+  ngZone: NgZone;
 }
 
 export interface NzCarouselStrategyRegistryItem {