Merge pull request #52 from VagrantAI-c/feature/set-index-preparation

fix: postpone setIndex when no slides available

README.md

@@ -164,7 +164,7 @@ or
 Use this reference to programmaticaly trigger next events:
 - `carouselRef.next()`: increment active slide
 - `carouselRef.prev()`: decrement active slide
-- `carouselRef.setIndex(newIndex: number)`: focus slide with provided item index
+- `carouselRef.setIndex(newIndex: number)`: focus slide with provided item index. When no slides are available, index change would postpone till slide initialization.
 - `carouselRef.recalculate()`: recalculate positions
 
 ### PreventGhostClickDirective

projects/ng-carousel/src/lib/private/service/carousel.service.ts

@@ -50,6 +50,11 @@ export class CarouselService implements OnDestroy {
     private readonly carouselState$ = new BehaviorSubject<CarouselState>(new CarouselState());
     private readonly destroyed$ = new Subject<void>();
     private currentAnimationId: number | null = null;
+    /**
+     * Item index that should be applied when carousel slides
+     * are initialized first time
+     */
+    private postponedItemIndex: number;
 
     constructor(
         private animation: AnimationBuilder,
@@ -70,8 +75,13 @@ export class CarouselService implements OnDestroy {
     }
 
     setItemIndex(newItemIndex: number): void {
-        this.enableAutoplay(); // Reset timer on programmatic item index change
         const carouselState = this.cloneCarouselState();
+        if (!carouselState.slides.length) {
+            this.postponedItemIndex = newItemIndex;
+
+            return;
+        }
+        this.enableAutoplay(); // Reset timer on programmatic item index change
         const slideIndex = findSlideIndex(
             carouselState.slides,
             newItemIndex,
@@ -326,7 +336,7 @@ export class CarouselService implements OnDestroy {
 
     /**
      * Narrow case scenario helper: use this when carousel inputs change.
-     * Function task is to initialize carousel whether all the components
+     * Function task is to initialize carousel when all the components
      * are ready.
      */
     private applyStateChange(newState: CarouselState): void {
@@ -348,6 +358,14 @@ export class CarouselService implements OnDestroy {
             || currentState.config.items !== newState.config.items
         ) {
             newState = this.initializeCarousel(newState);
+            this.setCarouselState(newState);
+
+            if (newState.slides.length && this.postponedItemIndex) {
+                this.setItemIndex(this.postponedItemIndex);
+                this.postponedItemIndex = null;
+            }
+
+            return;
         }
         this.setCarouselState(newState);
     }

projects/ng-carousel/src/lib/private/service/helpers/find-slide-index.spec.ts

@@ -83,4 +83,8 @@ describe('findItemIndex test suite', () => {
         )).toThrowError(CarouselError);
     });
 
+    it('must return 0 when no slides available', () => {
+        expect(findSlideIndex([], 10, 10)).toBe(0);
+        expect(findSlideIndex(null, 10, 10)).toBe(0);
+    });
 });

projects/ng-carousel/src/lib/private/service/helpers/find-slide-index.ts

@@ -11,7 +11,16 @@ export function findSlideIndex(
     newItemIndex: number,
     currentSlideIndex: number,
 ): number {
-    const currentItemIndex = slides[currentSlideIndex].itemIndex;
+    if (!slides) {
+
+        return 0;
+    }
+    const currentActiveSlide = slides[currentSlideIndex];
+    if (!currentActiveSlide) {
+
+        return 0;
+    }
+    const currentItemIndex = currentActiveSlide.itemIndex;
     let targetSlideIndex: IterateSideResult | null = null;
     if (newItemIndex === currentItemIndex || slides.length <= 1) {