Ngx Stories
An Angular component to render instagram like stories.
For Version 17+
Installation
Install the library via npm:
npm install ngx-storiesimport { 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
License
This library is licensed under the MIT License. Feel free to use and modify the code as per your needs.