Added the story change emitter and on initial load as well as on story and group change.

projects/ngx-stories/src/lib/ngx-stories.component.ts

@@ -5,7 +5,7 @@ import { StoryGroup } from '../lib/interfaces/interfaces';
 import { CommonModule } from '@angular/common';
 import { NgxStoriesService } from './ngx-stories.service';
 import { NgxStoriesOptions } from '../lib/interfaces/interfaces';
-import { onStoryGroupChange, triggerOnEnd, triggerOnExit, triggerOnSwipeUp } from './utils/story-event-emitters';
+import { onStoryGroupChange, triggerOnEnd, triggerOnExit, triggerOnStoryChange, triggerOnSwipeUp } from './utils/story-event-emitters';
 import "hammerjs";
 
 @Component({
@@ -34,6 +34,7 @@ export class NgxStoriesComponent implements AfterViewInit {
   @Output() triggerOnExit = triggerOnExit;
   @Output() triggerOnSwipeUp = triggerOnSwipeUp;
   @Output() onStoryGroupChange = onStoryGroupChange;
+  @Output() triggerOnStoryChange = triggerOnStoryChange;
 
   currentStoryIndex: number = 0;
   currentStoryGroupIndex: number = 0;
@@ -102,6 +103,7 @@ export class NgxStoriesComponent implements AfterViewInit {
       // For images, start with default duration
       this.startProgressInterval(storyDuration);
     }
+    this.populateCurrentDetails(this.currentStoryIndex, this.currentStoryGroupIndex)
   }
 
   private setInitialStoryIndex() {
@@ -177,9 +179,9 @@ export class NgxStoriesComponent implements AfterViewInit {
       direction === 'next'
         ? this.storyService.nextStory(this.storyGroups, this.currentStoryGroupIndex, this.currentStoryIndex, this.storyGroupChange.bind(this))
         : this.storyService.prevStory(this.storyGroups, this.currentStoryGroupIndex, this.currentStoryIndex, this.storyGroupChange.bind(this));
-
-    this.currentStoryGroupIndex = storyGroupIndex;
-    this.currentStoryIndex = storyIndex;
+        
+        this.currentStoryGroupIndex = storyGroupIndex;
+        this.currentStoryIndex = storyIndex;
 
     //Trigger onEnd emitter when all the storieGroups are traversed.
     if (this.currentStoryGroupIndex === this.storyGroups.length) {
@@ -343,4 +345,19 @@ export class NgxStoriesComponent implements AfterViewInit {
   private storyGroupChange(storyGroupIndex: number = this.currentStoryGroupIndex) {
     this.onStoryGroupChange.emit(storyGroupIndex);
   }
+  private populateCurrentDetails(currentSIndex: number, currentSGIndex: number) {
+    try {
+      const dataToSend =  {
+        currentPerson: this.storyGroups[currentSGIndex].name,
+        currentPersonIndex: currentSGIndex,
+        currentStory: this.storyGroups[currentSGIndex].stories[currentSIndex],
+        currentStoryIndex: currentSIndex,
+        previousStory: currentSIndex !== 0 ? this.storyGroups[currentSGIndex].stories[currentSIndex -1] : null,
+        previousStoryIndex: currentSIndex !== 0 ? currentSIndex : null
+      }
+      this.triggerOnStoryChange.emit(dataToSend);
+    } catch(error) {
+      console.error(error);
+    }
+  }
 }

projects/ngx-stories/src/lib/utils/story-event-emitters.ts

@@ -3,4 +3,5 @@ import { EventEmitter } from '@angular/core';
 export const triggerOnEnd: EventEmitter<void> = new EventEmitter<void>();
 export const triggerOnExit: EventEmitter<void> = new EventEmitter<void>();
 export const triggerOnSwipeUp: EventEmitter<void> = new EventEmitter<void>();
+export const triggerOnStoryChange: EventEmitter<object> = new EventEmitter<object>();
 export const onStoryGroupChange: EventEmitter<number> = new EventEmitter<number>();

src/app/app.component.html

@@ -8,4 +8,5 @@ <h1>Ngx-Stories Demo</h1>
 (triggerOnEnd)="triggerOnEnd()"
 (triggerOnExit)="triggerOnExit()"
 (onStoryGroupChange)="triggerOnStoryGroupChange($event)"
+(triggerOnStoryChange)="currentStoryDetails($event)"
 ></ngx-stories>

src/app/app.component.ts

@@ -49,4 +49,7 @@ export class AppComponent {
   triggerOnStoryGroupChange(storyGroup: number) {
     console.log(storyGroup);
   }
+  currentStoryDetails(eventData: object) {
+    console.log('dataToShow', eventData);
+  }
 }