{"id":15876594,"url":"https://github.com/Gauravdarkslayer/ngx-stories","last_synced_at":"2025-10-17T18:31:09.790Z","repository":{"id":257811900,"uuid":"833533239","full_name":"Gauravdarkslayer/ngx-stories","owner":"Gauravdarkslayer","description":"An Angular component to render instagram like stories.","archived":false,"fork":false,"pushed_at":"2024-10-21T18:47:45.000Z","size":335,"stargazers_count":17,"open_issues_count":19,"forks_count":11,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-22T21:39:53.483Z","etag":null,"topics":["angular","hacktoberfest","stories","typescript"],"latest_commit_sha":null,"homepage":"https://ngx-stories.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Gauravdarkslayer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-25T08:47:26.000Z","updated_at":"2024-10-21T18:44:41.000Z","dependencies_parsed_at":null,"dependency_job_id":"13da250d-ab92-4876-8188-26e86481e40e","html_url":"https://github.com/Gauravdarkslayer/ngx-stories","commit_stats":null,"previous_names":["gauravdarkslayer/ngx-stories"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gauravdarkslayer%2Fngx-stories","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gauravdarkslayer%2Fngx-stories/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gauravdarkslayer%2Fngx-stories/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gauravdarkslayer%2Fngx-stories/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Gauravdarkslayer","download_url":"https://codeload.github.com/Gauravdarkslayer/ngx-stories/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":236853704,"owners_count":19215170,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","hacktoberfest","stories","typescript"],"created_at":"2024-10-06T02:01:01.892Z","updated_at":"2025-10-17T18:31:04.176Z","avatar_url":"https://github.com/Gauravdarkslayer.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Carousels"],"readme":"# Ngx Stories\n\nAn Angular component to render instagram like stories.\n\n[![npm downloads](https://img.shields.io/npm/dt/ngx-stories)](https://www.npmjs.com/package/ngx-stories)\n[![npm version](https://img.shields.io/npm/v/ngx-stories)](https://www.npmjs.com/package/ngx-stories)\n\n## Screenshot\n![Story Screenshot](./assets/images/story-screenshot.png)\n\n\n## For Version 17+\n\n## Installation\n\nInstall the library via npm:\n\n```bash\nnpm install ngx-stories\n```\n\n```ts\nimport { NgxStoriesComponent, StoryGroup } from 'ngx-stories';\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  imports: [NgxStoriesComponent],\n  templateUrl: './app.component.html',\n  styleUrl: './app.component.css'\n})\nexport class AppComponent {\n  storyGroups: StoryGroup[] = [\n      {\n        name: 'John Doe',\n        stories: [\n          { type: 'image', content: 'https://example.com/story1.jpg' },\n          { type: 'component', content: CustomComponent }, // pass any angular component to render in stories\n        ],\n      },\n      {\n        name: 'Jane Smith',\n        stories: [\n          { type: 'image', content: 'https://example.com/story3.jpg' },\n          { type: 'video', content: 'https://example.com/video-story.mp4' },\n        ],\n      },\n    ];\n  }\n```\n\n```html\n\u003cngx-stories [storyGroups]=\"storyGroups\"\u003e\u003c/ngx-stories\u003e\n```\n\n## Properties\n| Property           | Type                  | Required | Description                                                                                                  |\n|--------------------|-----------------------|----------|--------------------------------------------------------------------------------------------------------------|\n| `storyGroups`      | `StoryGroup[]`        | Yes      | An input property that accepts an array of story groups. Each group contains a list of stories to display.     |\n| `options`          | `NgxStoriesOptions`   | No       | Configuration options for the story display. Options include `width` and `height` to customize the dimensions. |\n| `triggerOnEnd`     | `EventEmitter\u003cvoid\u003e`  | No       | Output event that is triggered when the user reaches the end of all stories.                                  |\n| `triggerOnExit`    | `EventEmitter\u003cvoid\u003e`  | No       | Output event that is triggered when the user manually exits the story view.                                   |\n| `triggerOnSwipeUp` | `EventEmitter\u003cvoid\u003e`  | No       | Output event that is triggered when the user performs a swipe-up gesture, typically for additional actions.    |\n| `onStoryGroupChange` | `EventEmitter\u003cnumber\u003e`  | No       | Output event that is triggered when the user changes the storyGroup.\n| `triggerOnStoryChange` | `EventEmitter\u003cobject\u003e`  | No       | Output event that is triggered when the user changes the story.\n\n\n```ts\ninterface NgxStoriesOptions {\n  width: number, // width of story\n  height: number, // height of story\n  currentStoryIndex: 0, // index from where stories should start\n  currentStoryGroupIndex: 0, // index from where story group should start\n  backlitColor: string // background color of story default is #1b1b1b\n}\n```\n\n## Features\n* Dynamic Story Carousel: Display a collection of stories for each storyGroup.\n* Easy Integration: Simple and straightforward to integrate into your Angular project.\n* Story Progress Tracker: Track the progress of each story as the user navigates through the stories.\n* Swipe Gestures (Mobile Friendly): Allow users to swipe left or right to navigate through the stories.\n* Hold to Pause: Pause the story progress when the user holds their finger on the screen.\n* Events: Trigger events when the user reaches the end of the stories or when they exit the carousel.\n* Keyboard navigation(Experimental).\n* Loading: A Loading svg will be shown when story buffers (SVG from \u003ca href=\"https://www.svgbackgrounds.com/elements/animated-svg-preloaders/\"\u003eAnimated SVG Preloaders by SVGBackgrounds.com\u003c/a\u003e)\n* Audio controls: Toggle audio on/off for stories that have audio.\n* Component based stories for best control.\n* Auto-assigning unique ids to storyGroups and stories.\n\n## Contributing\n[Contributing Guide](https://github.com/Gauravdarkslayer/ngx-stories/blob/main/CONTRIBUTING.md)\n\n## License\nThis library is licensed under the MIT License. Feel free to use and modify the code as per your needs.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGauravdarkslayer%2Fngx-stories","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FGauravdarkslayer%2Fngx-stories","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGauravdarkslayer%2Fngx-stories/lists"}