fix(tabs): change detection after animation - 13.0.x (#10707)

* fix(tabs): change detection after animation

* fix(tabs): move change detection to tabs directive

* fix(tabs): move change detection to carousel base

Author: igdmdimitrov

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

@@ -1,5 +1,5 @@
 import { AnimationBuilder, AnimationPlayer, AnimationReferenceMetadata, useAnimation } from '@angular/animations';
-import { EventEmitter } from '@angular/core';
+import { ChangeDetectorRef, EventEmitter } from '@angular/core';
 import { fadeIn } from '../animations/fade';
 import { slideInLeft } from '../animations/slide';
 import { mkenum } from '../core/utils';
@@ -49,7 +49,7 @@ export abstract class IgxCarouselComponentBase {
     /** @hidden */
     protected newDuration = 0;
 
-    constructor(private builder: AnimationBuilder) {
+    constructor(private builder: AnimationBuilder, private cdr: ChangeDetectorRef) {
     }
 
     /** @hidden */
@@ -86,6 +86,7 @@ export abstract class IgxCarouselComponentBase {
         if (this.animationStarted(this.enterAnimationPlayer)) {
             this.enterAnimationPlayer.reset();
             this.enterAnimationDone.emit();
+            this.cdr.markForCheck();
         }
     }
 
@@ -155,6 +156,7 @@ export abstract class IgxCarouselComponentBase {
             this.newDuration = 0;
             this.previousItem.previous = false;
             this.enterAnimationDone.emit();
+            this.cdr.markForCheck();
         });
         this.previousItem.previous = true;
         this.enterAnimationPlayer.play();

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

@@ -18,7 +18,8 @@ import {
     TemplateRef,
     ViewChild,
     ContentChild,
-    Injectable
+    Injectable,
+    ChangeDetectorRef
 } from '@angular/core';
 import { IgxIconModule } from '../icon/public_api';
 import { IBaseEventArgs, mkenum, PlatformUtil } from '../core/utils';
@@ -534,9 +535,9 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
         this.restartInterval();
     }
 
-    constructor(private element: ElementRef, private iterableDiffers: IterableDiffers,
+    constructor(cdr: ChangeDetectorRef, private element: ElementRef, private iterableDiffers: IterableDiffers,
         builder: AnimationBuilder, private platformUtil: PlatformUtil) {
-        super(builder);
+        super(builder, cdr);
         this.differ = this.iterableDiffers.find([]).create(null);
     }
 

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

@@ -980,7 +980,7 @@ describe('Stepper service unit tests', () => {
         };
 
         stepperService = new IgxStepperService();
-        stepper = new IgxStepperComponent(mockAnimationBuilder, stepperService, mockElementRef);
+        stepper = new IgxStepperComponent(mockCdr, mockAnimationBuilder, stepperService, mockElementRef);
         steps = [];
         for (let index = 0; index < 4; index++) {
             const newStep = new IgxStepComponent(stepper, mockCdr, null,

projects/igniteui-angular/src/lib/stepper/stepper.component.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import {
     Component, HostBinding, OnDestroy, OnInit,
     Input, Output, EventEmitter, ContentChildren, QueryList, ElementRef,
-    NgModule, OnChanges, SimpleChanges, TemplateRef, ContentChild, AfterContentInit
+    NgModule, OnChanges, SimpleChanges, TemplateRef, ContentChild, AfterContentInit, ChangeDetectorRef
 } from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -331,10 +331,11 @@ export class IgxStepperComponent extends IgxCarouselComponentBase implements Igx
     private readonly _defaultAnimationDuration = 350;
 
     constructor(
+        cdr: ChangeDetectorRef,
         private animBuilder: AnimationBuilder,
         private stepperService: IgxStepperService,
         private element: ElementRef<HTMLElement>) {
-        super(animBuilder);
+        super(animBuilder, cdr);
         this.stepperService.stepper = this;
     }
 

projects/igniteui-angular/src/lib/tabs/tabs.directive.ts

@@ -1,6 +1,6 @@
 import { AnimationBuilder } from '@angular/animations';
 import {
-    AfterViewInit, ContentChildren, Directive, EventEmitter,
+    AfterViewInit, ChangeDetectorRef, ContentChildren, Directive, EventEmitter,
     Input, OnDestroy, Output, QueryList
 } from '@angular/core';
 import { Subscription } from 'rxjs';
@@ -119,8 +119,8 @@ export abstract class IgxTabsDirective extends IgxCarouselComponentBase implemen
     private _itemChanges$: Subscription;
 
     /** @hidden */
-    constructor(builder: AnimationBuilder) {
-        super(builder);
+    constructor(builder: AnimationBuilder, cdr: ChangeDetectorRef) {
+        super(builder, cdr);
     }
 
     /** @hidden */

projects/igniteui-angular/src/lib/tabs/tabs/tabs.component.ts

@@ -1,5 +1,5 @@
 import { AnimationBuilder } from '@angular/animations';
-import { AfterViewInit, Component, ElementRef, HostBinding, Input, NgZone, OnDestroy, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, HostBinding, Input, NgZone, OnDestroy, ViewChild } from '@angular/core';
 import { getResizeObserver, mkenum } from '../../core/utils';
 import { IgxTabsBase } from '../tabs.base';
 import { IgxTabsDirective } from '../tabs.directive';
@@ -118,8 +118,8 @@ export class IgxTabsComponent extends IgxTabsDirective implements AfterViewInit,
     private _tabAlignment: string | IgxTabsAlignment = 'start';
     private _resizeObserver: ResizeObserver;
 
-    constructor(builder: AnimationBuilder, private ngZone: NgZone) {
-        super(builder);
+    constructor(builder: AnimationBuilder, cdr: ChangeDetectorRef, private ngZone: NgZone) {
+        super(builder, cdr);
     }