{"id":13808917,"url":"https://github.com/tonysamperi/ngx-tour-wizard","last_synced_at":"2025-08-21T07:36:56.694Z","repository":{"id":33125338,"uuid":"152216772","full_name":"tonysamperi/ngx-tour-wizard","owner":"tonysamperi","description":"Product Tour Wizard built with Angular","archived":false,"fork":false,"pushed_at":"2024-10-19T16:42:56.000Z","size":7530,"stargazers_count":16,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-08T01:09:11.094Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://tonysamperi.github.io/ngx-tour-wizard","language":"TypeScript","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/tonysamperi.png","metadata":{"files":{"readme":"README.md","changelog":"changelog.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"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":"2018-10-09T08:37:46.000Z","updated_at":"2024-10-19T16:42:53.000Z","dependencies_parsed_at":"2023-02-14T01:15:48.273Z","dependency_job_id":"fc0736bc-3fdb-42d2-a3fb-fcf43c04280d","html_url":"https://github.com/tonysamperi/ngx-tour-wizard","commit_stats":{"total_commits":146,"total_committers":4,"mean_commits":36.5,"dds":0.4794520547945206,"last_synced_commit":"913bd9d3e88be67530e5ad0c33287183008e01ae"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tonysamperi%2Fngx-tour-wizard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tonysamperi%2Fngx-tour-wizard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tonysamperi%2Fngx-tour-wizard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tonysamperi%2Fngx-tour-wizard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tonysamperi","download_url":"https://codeload.github.com/tonysamperi/ngx-tour-wizard/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225273290,"owners_count":17448080,"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":[],"created_at":"2024-08-04T01:01:54.941Z","updated_at":"2024-11-19T00:31:12.447Z","avatar_url":"https://github.com/tonysamperi.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Onboarding and Product Tours"],"readme":"# ngx-tour-wizard\n\nA cool Angular 8+ module for intro tours!\n*ngx-tour-wizard* a highly customizable library. Popper are made with NgxPopperjs.\n\n[![npm](https://img.shields.io/npm/v/ngx-tour-wizard.svg?style=flat-square)](https://www.npmjs.com/package/ngx-tour-wizard) \n[![npm](https://img.shields.io/npm/dm/ngx-tour-wizard.svg?style=flat-square)](https://www.npmjs.com/package/ngx-tour-wizard) \n[![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://github.com/tonysamperi/ngx-tour-wizard/blob/master/LICENSE)\n[![Build Status](https://travis-ci.org/tonysamperi/ngx-tour-wizard.svg?branch=master)](https://travis-ci.org/tonysamperi/ngx-tour-wizard)\n[![Size](https://img.shields.io/bundlephobia/min/ngx-tour-wizard)](https://unpkg.com/ngx-tour-wizard@8.0.0/bundles/ngx-tour-wizard.umd.js)\n\n# Before starting\n\n##IMPORTANT for IE\n\nThis library use CustomEvents. If you want compatibility with IE,\nyou should add a polyfill to your app polyfills.ts.\n\nSee polyfill on [gist](https://gist.github.com/tonysamperi/0e73f8489000e8261600a92af92748c1)\n\n##Styling\n\nAs you may know directives don't have a \"Styles\" property.\nSo it's impossible to let them style your markup,\n**unless** you include an external CSS.\n\nFor this purpose you can import prebuild themes for ngx-tour-wizard...\n\n...in SASS style, where you can edit variables (it's very straight forward so read the source)\n\n`@import \"node_modules/ngx-tour-wizard/scss/tour-wizard.scss\";`\n\n...or in CSS style (and you can always override everything you want)\n\n `@import \"node_modules/ngx-tour-wizard/css/tour-wizard.css\";`\n\nBe sure of including at least one of these in your styles.css / styles.scss\nto get the basic style\n\n## Installation\n\n```bash\n$ npm install ngx-tour-wizard@latest\n```\n\nand then from your Angular `AppModule`:\n\n```typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppComponent } from './app.component';\n\n// Import what you need from ngx-mat-lib\nimport { NgxTourWizardModule } from 'ngx-tour-wizard';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n\n    // Specify the import\n    NgxTourWizardModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\nYou can optionally use the `forRoot()` method and pass tourWizardDefaults as follows\n\n```js\n// ...\nproviders: [\n    NgxTourWizardModule.forRoot({\n        backdropTarget: \".my-selector\",\n        backdropEnabled: true,\n        keyboardEnabled: false\n    })\n]\n// ...\n```\n\nOnce your library is imported, you can use its components, directives and pipes in your Angular application:\n\n```html\n\u003c!-- You can now use your library component in app.component.html --\u003e\n\u003ch1\u003e\n  {{title}}\n\u003c/h1\u003e\n\u003cspan (click)=\"startTour()\"\u003e\n    Start tour\n\u003c/span\u003e\n\u003cany tourWizardAnchor=\"FOO_1\"\u003eMY ANCHOR 1 \u003c/any\u003e\n\u003cany tourWizardAnchor=\"FOO_2\"\u003eMY ANCHOR 2 \u003c/any\u003e\n\u003cany tourWizardAnchor=\"FOO_3\"\u003eMY ANCHOR 3\u003c/any\u003e\n```\n\n```typescript\nimport { TourWizardService, TourWizardStep } from 'ngx-tour-wizard';\n\nexport class MyComponent {\n\n    constructor(private _tourWizardService: TourWizardService) {\n    }\n\n    ngOnInit(): void {\n        this._tourWizardService.initialize([\n            {\n                anchorId: \"FOO_1\",\n                content: \"Some text for FOO 1\",\n                title: \"First\"\n            },\n            {\n                anchorId: \"FOO_2\",\n                content: \"Some other stuff for FOO 2\",\n                title: \"Second\"\n            },\n            {\n                anchorId: \"FOO_3\",\n                content: \"Let's finish this up!!!\",\n                title: \"Third\"\n            },\n        ] as TourWizardStep[]);\n    }\n\n    startTour(): void {\n        this._tourWizardService.start();\n    }\n}\n\n```\n\nVersioning\nngx-tour-wizard will be maintained under the Semantic Versioning guidelines as much as possible. Releases will be numbered with the following format:\n\n\u003cmajor\u003e.\u003cminor\u003e.\u003cpatch\u003e\n\nAnd constructed with the following guidelines:\n\nBreaking backward compatibility bumps the major (and resets the minor and patch)\nNew additions, including new icons, without breaking backward compatibility bumps the minor (and resets the patch)\nBug fixes, changes to brand logos, and misc changes bumps the patch\nFor more information on SemVer, please visit http://semver.org.\n\n## License\n\nMIT © [Tony Samperi](mailto:github@tonysamperi.it)\n\nThis library is free, open source, and GPL friendly. You can use it for\ncommercial projects, open source projects, or really almost whatever you want.\n\nAttribution is required by MIT, SIL OLF, and CC BY licenses.\nDownloaded files already contain embedded comments with sufficient attribution,\nso you shouldn't need to do anything additional when using these files normally.\n\n# TODOS\n* IMPORTANT!! Add optional ID for backdrop, or custom backdrop\n* Optional pause on click outside\n* Add option to remove backdrop and kboard on end?\n* Disable tour on route change??\n* Disable scrolling between 2 steps?\n* Async content? \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftonysamperi%2Fngx-tour-wizard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftonysamperi%2Fngx-tour-wizard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftonysamperi%2Fngx-tour-wizard/lists"}