Merge pull request #15980 from IgniteUI/rivanova/fix-15976-20.0.x

fix(carousel-base): set animation players to null on destroy - 20.0.x

Author: kacheshmarova

projects/igniteui-angular/src/lib/carousel/carousel-base.ts

@@ -52,8 +52,14 @@ export abstract class IgxCarouselComponentBase implements OnDestroy {
     }
 
     public ngOnDestroy(): void {
-        this.enterAnimationPlayer?.destroy();
-        this.leaveAnimationPlayer?.destroy();
+        if (this.enterAnimationPlayer) {
+            this.enterAnimationPlayer.destroy();
+            this.enterAnimationPlayer = null;
+        }
+        if (this.leaveAnimationPlayer) {
+            this.leaveAnimationPlayer.destroy();
+            this.leaveAnimationPlayer = null;
+        }
     }
 
     /** @hidden */

projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts

@@ -745,6 +745,17 @@ describe('Carousel', () => {
             expect(carousel.get(1).nativeElement.classList.contains(HelperTestFunctions.ACTIVE_SLIDE_CLASS)).toBeTruthy();
             expect(carousel.get(0).nativeElement.classList.contains(HelperTestFunctions.PREVIOUS_SLIDE_CLASS)).toBeFalsy();
         });
+
+        it('should not throw an error when playing an animation and destroying the component - #15976', () => {
+            expect(() => {
+                carousel.next();
+                carousel.ngOnDestroy();
+                fixture.detectChanges();
+            }).not.toThrow();
+
+            expect(carousel['enterAnimationPlayer']).toBe(null);
+            expect(carousel['leaveAnimationPlayer']).toBe(null);
+        });
     });
 
     describe('Dynamic Slides: ', () => {