fix(carousel): update active class when the content changes

src/carousel/carousel.spec.ts

@@ -336,6 +336,7 @@ describe('ngb-carousel', () => {
     fixture.componentInstance.slides = ['c', 'd'];
     fixture.detectChanges();
     expect(getSlidesText(fixture.nativeElement)).toEqual(['c', 'd']);
+    expectActiveSlides(fixture.nativeElement, [true, false]);
   });
 
   it('should change slide on indicator click', fakeAsync(() => {

src/carousel/carousel.ts

@@ -25,7 +25,7 @@ import {NgbCarouselConfig} from './carousel-config';
 
 import {BehaviorSubject, combineLatest, NEVER, Observable, Subject, timer, zip} from 'rxjs';
 import {distinctUntilChanged, map, startWith, switchMap, take, takeUntil} from 'rxjs/operators';
-import {ngbRunTransition, NgbTransitionOptions} from '../util/transition/ngbTransition';
+import {ngbCompleteTransition, ngbRunTransition, NgbTransitionOptions} from '../util/transition/ngbTransition';
 import {
   ngbCarouselTransitionIn,
   ngbCarouselTransitionOut,
@@ -280,7 +280,25 @@ export class NgbCarousel implements AfterContentChecked,
       });
     }
 
-    this.slides.changes.pipe(takeUntil(this._destroy$)).subscribe(() => this._cd.markForCheck());
+    this.slides.changes.pipe(takeUntil(this._destroy$)).subscribe(() => {
+      this._transitionIds ?.forEach(id => ngbCompleteTransition(this._getSlideElement(id)));
+      this._transitionIds = null;
+
+      this._cd.markForCheck();
+
+      // The following code need to be done asynchronously, after the dom becomes stable,
+      // otherwise all changes will be undone.
+      this._ngZone.onStable.pipe(take(1)).subscribe(() => {
+        for (const { id } of this.slides) {
+          const element = this._getSlideElement(id);
+          if (id === this.activeId) {
+            element.classList.add('active');
+          } else {
+            element.classList.remove('active');
+          }
+        }
+      });
+    });
   }
 
   ngAfterContentChecked() {

src/test/test-styles.css

@@ -74,6 +74,7 @@
 
 .ngb-test-after {
   opacity: 0;
+  transition: none;
 }
 
 .ngb-test-hide-outer {

src/util/transition/ngbTransition.spec.ts

@@ -233,7 +233,7 @@ if (isBrowserVisible('ngbRunTransition')) {
       expect(completeSpy1).toHaveBeenCalled();
       expect(element.classList.contains('ngb-test-during')).toBe(false);
       expect(element.classList.contains('ngb-test-after')).toBe(true);
-      expect(window.getComputedStyle(element).opacity).toBe('0');
+      expectOpacity(element, '0');
     });
 
     it(`should create and allow modifying context when running a new transition`, (done) => {

src/util/transition/ngbTransition.ts

@@ -15,7 +15,7 @@ export interface NgbTransitionOptions<T> {
 
 export interface NgbTransitionCtx<T> {
   transition$: Subject<any>;
-  stop: () => void;
+  complete: () => void;
   context: T;
 }
 
@@ -70,7 +70,7 @@ export const ngbRunTransition =
           const stop$ = transition$.pipe(endWith(true));
           runningTransitions.set(element, {
             transition$,
-            stop: () => {
+            complete: () => {
               finishTransition$.next();
               finishTransition$.complete();
             },
@@ -100,5 +100,5 @@ export const ngbRunTransition =
         };
 
 export const ngbCompleteTransition = (element: HTMLElement) => {
-  runningTransitions.get(element) ?.stop();
+  runningTransitions.get(element) ?.complete();
 };