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 Animated SVG Preloaders by SVGBackgrounds.com)
• 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.