Awesome

Ngx Stories

An Angular component to render instagram like stories.

For Version 17+

Installation

Install the library via npm:

npm install ngx-stories

import { NgxStoriesComponent, StoryGroup } from 'ngx-stories';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgxStoriesComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  storyGroups: StoryGroup[] = [
      {
        id: 1,
        name: 'John Doe',
        stories: [
          { id: 101, type: 'image', content: 'https://example.com/story1.jpg' },
        ],
      },
      {
        id: 2,
        name: 'Jane Smith',
        stories: [
          { id: 103, type: 'image', content: 'https://example.com/story3.jpg' },
          { id: 3, type: 'video', content: 'https://example.com/video-story.mp4' },
        ],
      },
    ];
  }

<ngx-stories [storyGroups]="storyGroups"></ngx-stories>

Properties

Property	Type	Required	Description
`storyGroups`	`StoryGroup[]`	Yes	An input property that accepts an array of story groups. Each group contains a list of stories to display.
`options`	`NgxStoriesOptions`	No	Configuration options for the story display. Options include `width` and `height` to customize the dimensions.
`triggerOnEnd`	`EventEmitter<void>`	No	Output event that is triggered when the user reaches the end of all stories.
`triggerOnExit`	`EventEmitter<void>`	No	Output event that is triggered when the user manually exits the story view.
`triggerOnSwipeUp`	`EventEmitter<void>`	No	Output event that is triggered when the user performs a swipe-up gesture, typically for additional actions.
`onStoryGroupChange`	`EventEmitter<number>`	No	Output event that is triggered when the user changes the storyGroup.

interface NgxStoriesOptions {
  width: number, // width of story
  height: number, // height of story
  currentStoryIndex: 0, // index from where stories should start
  currentStoryGroupIndex: 0, // index from where story group should start
  backlitColor: string // background color of story default is #1b1b1b
}

Features

Dynamic Story Carousel: Display a collection of stories for each storyGroup.
Easy Integration: Simple and straightforward to integrate into your Angular project.
Story Progress Tracker: Track the progress of each story as the user navigates through the stories.
Swipe Gestures (Mobile Friendly): Allow users to swipe left or right to navigate through the stories.
Hold to Pause: Pause the story progress when the user holds their finger on the screen.
Events: Trigger events when the user reaches the end of the stories or when they exit the carousel.
Keyboard navigation(Experimental).
Loading: A Loading svg will be shown when story buffers (SVG from <a href="https://www.svgbackgrounds.com/elements/animated-svg-preloaders/">Animated SVG Preloaders by SVGBackgrounds.com</a>)
Audio controls: Toggle audio on/off for stories that have audio.

Contributing

Contributing Guide

License

This library is licensed under the MIT License. Feel free to use and modify the code as per your needs.