{"id":46109578,"url":"https://github.com/andresciceri/ngx-intro","last_synced_at":"2026-03-13T17:00:46.839Z","repository":{"id":286935114,"uuid":"962996358","full_name":"andresciceri/ngx-intro","owner":"andresciceri","description":"Angular Wrapper for Intro.js","archived":false,"fork":false,"pushed_at":"2026-02-18T20:15:35.000Z","size":282,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-02-18T23:51:21.908Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andresciceri.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":".github/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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-04-09T02:04:10.000Z","updated_at":"2026-02-18T20:15:39.000Z","dependencies_parsed_at":"2025-04-09T04:36:43.659Z","dependency_job_id":null,"html_url":"https://github.com/andresciceri/ngx-intro","commit_stats":null,"previous_names":["andresciceri/ngx-intro"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/andresciceri/ngx-intro","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andresciceri%2Fngx-intro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andresciceri%2Fngx-intro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andresciceri%2Fngx-intro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andresciceri%2Fngx-intro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andresciceri","download_url":"https://codeload.github.com/andresciceri/ngx-intro/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andresciceri%2Fngx-intro/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30471114,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-13T11:00:43.441Z","status":"ssl_error","status_checked_at":"2026-03-13T11:00:23.173Z","response_time":60,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2026-03-01T22:00:55.626Z","updated_at":"2026-03-13T17:00:46.833Z","avatar_url":"https://github.com/andresciceri.png","language":"CSS","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Onboarding and Product Tours"],"readme":"# ngx-intro\n\nAn Angular library that provides a simple integration of [Intro.js](https://introjs.com/) to create interactive guides and step-by-step tutorials in Angular applications.\n\n[![npm version](https://badge.fury.io/js/%40andresciceri%2Fngx-intro.svg)](https://badge.fury.io/js/%40andresciceri%2Fngx-intro)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n## Features\n\n- Complete integration of Intro.js with Angular\n- Injectable service to start, control, and customize interactive guides\n- Support for multiple visual themes\n- Simple and easy-to-use API\n- Fully typed with TypeScript\n\n## Installation\n\n```bash\nnpm i @andresciceri/ngx-intro --save\n```\n\n### CSS Styles Setup\n\nTo include the Intro.js styles in your Angular application, add the following import to your `styles.css` or `styles.scss` file:\n\n```css\n@import '../../../node_modules/@andresciceri/ngx-intro/assets/introjs.css';\n```\n\nIf you want to use a specific theme from Intro.js, also add the corresponding import:\n\n```css\n@import '../../../node_modules/@andresciceri/ngx-intro/assets/introjs-modern.css';\n```\n\n## Basic Usage\n\n1. Import the module in your Angular application:\n\n```typescript\nimport { IntrojsService } from '@andresciceri/ngx-intro';\n```\n\n2. Inject the service into your component:\n\n```typescript\nconstructor(private introService: IntrojsService) { }\n```\n\n3. Define your steps and start the tour:\n\n```typescript\nngOnInit() {\n  const steps = [\n    {\n      element: '#step1',\n      intro: 'This is the first step',\n      step: 0,\n      title: 'First Step',\n      position: 'floating',\n      scrollTo: 'element',\n    },\n    {\n      element: '#step2',\n      intro: 'This is the second step',\n      step: 1,\n      title: 'Second Step',\n      position: 'floating',\n      scrollTo: 'element',\n    }\n  ];\n  \n  this.introService.startTour(steps);\n}\n```\n\n## API\n\n### IntrojsService\n\n- `startTour(steps: IntroStep[], options?: Options): void` - Starts a tour with the defined steps and options\n- `exitTour(force: boolean): void` - Exits the current tour\n- `onComplete(callback: () =\u003e void): void` - Sets a callback for when the tour is completed\n- `onExit(callback: () =\u003e void): void` - Sets a callback for when the tour is exited\n- `applyTheme(themeUrl: string): void` - Applies a custom theme to change the appearance of the tour\n\n## Available Themes\n\nThe library includes the following themes that can be applied with `applyTheme()`:\n\n- `introjs.css` - Standard theme\n- `introjs-dark.css` - Dark theme\n- `introjs-flattener.css` - Flat theme\n- `introjs-modern.css` - Modern theme\n- `introjs-nassim.css` - Nassim theme\n- `introjs-nazanin.css` - Nazanin theme\n- `introjs-royal.css` - Royal theme\n\n## Examples\n\n```typescript\nimport { Component, OnInit } from '@angular/core';\nimport { IntrojsService } from '@andresciceri/ngx-intro';\n\n@Component({\n  selector: 'app-demo',\n  template: `\n    \u003cdiv id=\"step1\"\u003eFirst element\u003c/div\u003e\n    \u003cdiv id=\"step2\"\u003eSecond element\u003c/div\u003e\n    \u003cbutton (click)=\"startDemo()\"\u003eStart Demo\u003c/button\u003e\n  `\n})\nexport class DemoComponent implements OnInit {\n  \n  constructor(private introService: IntrojsService) {}\n  \n  ngOnInit() {\n    // Apply a theme\n    this.introService.applyTheme('assets/introjs-dark.css');\n    \n    // Configure callbacks\n    this.introService.onComplete(() =\u003e {\n      console.log('Tour completed');\n    });\n    \n    this.introService.onExit(() =\u003e {\n      console.log('Tour cancelled');\n    });\n  }\n  \n  startDemo() {\n    const steps = [\n      {\n        element: '#step1',\n        intro: 'First step of the tour',\n        title: 'Step 1',\n        position: 'bottom'\n      },\n      {\n        element: '#step2',\n        intro: 'Second step of the tour',\n        title: 'Step 2',\n        position: 'right'\n      }\n    ];\n    \n    // Additional options\n    const options = {\n      showStepNumbers: true,\n      exitOnOverlayClick: false,\n      showBullets: true\n    };\n    \n    this.introService.startTour(steps, options);\n  }\n}\n```\n\n## Development\n\nThis library was generated with [Nx](https://nx.dev).\n\n### Running unit tests\n\n```bash\nnx test ngx-intro-js\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandresciceri%2Fngx-intro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandresciceri%2Fngx-intro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandresciceri%2Fngx-intro/lists"}