{"id":23069180,"url":"https://github.com/stories2/angular-onboarding","last_synced_at":"2025-06-16T23:02:24.431Z","repository":{"id":38563191,"uuid":"258099921","full_name":"stories2/Angular-Onboarding","owner":"stories2","description":"Onboarding library for angular 7","archived":false,"fork":false,"pushed_at":"2023-01-07T17:24:50.000Z","size":1745,"stargazers_count":1,"open_issues_count":28,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-06T18:06:19.444Z","etag":null,"topics":["angular-library","angular-material","angular7","onboarding","onboarding-screen"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/story-onboarding","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/stories2.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-23T05:06:39.000Z","updated_at":"2023-06-14T14:25:23.000Z","dependencies_parsed_at":"2023-02-07T18:01:57.478Z","dependency_job_id":null,"html_url":"https://github.com/stories2/Angular-Onboarding","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/stories2/Angular-Onboarding","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stories2%2FAngular-Onboarding","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stories2%2FAngular-Onboarding/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stories2%2FAngular-Onboarding/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stories2%2FAngular-Onboarding/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stories2","download_url":"https://codeload.github.com/stories2/Angular-Onboarding/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stories2%2FAngular-Onboarding/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260256240,"owners_count":22981805,"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-library","angular-material","angular7","onboarding","onboarding-screen"],"created_at":"2024-12-16T06:13:58.502Z","updated_at":"2025-06-16T23:02:24.411Z","avatar_url":"https://github.com/stories2.png","language":"TypeScript","readme":"# Onboarding for angular7\n\n![demo](demo/demo.gif)\n\nShow onboarding for angular 7.\n\n## How to use\n\n```\n\u003cNg7-Onboarding [story]=\"storyBoard\" [gap]='20' (done)=\"endOfTutorial($event)\"\u003e\u003c/Ng7-Onboarding\u003e\n```\n\n`story`\n- Set onboarding flow array.\n\n`gap`\n- Set gap between highlighted DOM and onboarding popup.\n\n`done` \n- Trigger when onboarding is ended.\n\n### Optional\n\n`btnNextText`\n- Set next button text.\n\n`btnPrevText`\n- Set previous button text.\n\n`btnDoneText`\n- Set done button text.\n\n### Story board data\n\n```\nstoryBoard = [\n    {\n      id: 'h1Wellcome',\n      text: 'This is wellcome',\n      direction: 'bottom'\n    },\n    {\n      id: 'angularIcon',\n      text: 'This is icon',\n      direction: 'right'\n    },\n    {\n      id: 'angularIcon',\n      text: 'This is icon',\n      direction: 'left'\n    },\n    ...\n    {\n      id: 'cli',\n      text: 'This is cli',\n      direction: 'bottom'\n    },\n    {\n      id: 'blog',\n      text: 'This is blog',\n      direction: 'bottom'\n    }\n  ] as StoryOnboardingModel[];\n```\n\n`id`\n- Will highlight DOM's ID\n\n```\n\u003ch1 id=\"h1Wellcome\"\u003e \u003c!-- h1Wellcome is id --\u003e\n    Welcome to {{ title }}!\n\u003c/h1\u003e\n```\n\n`text`\n- Onboarding message.\n\n`direction`\n- Onboarding view's direction. `left`, `top`, `right`, `bottom` avaliable.\n\n-------------------------\n\n`app.module.ts`\n\n```\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppComponent } from './app.component';\n\nimport { OnboardingModule } from 'story-onboarding';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    OnboardingModule // \u003c-- onboarding module\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n\n```\n\nOR\n\n`app.module.ts`\n\n```\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppComponent } from './app.component';\n\nimport { MatButtonModule, MatCardModule } from '@angular/material';\n\nimport { OnboardingComponent } from 'story-onboarding';\n\n@NgModule({\n  declarations: [\n    AppComponent,\n    OnboardingComponent // \u003c-- onboarding component\n  ],\n  imports: [\n    BrowserModule,\n\n    MatButtonModule, // \u003c-- needed\n    MatCardModule // \u003c-- needed\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n\n## Build Library\n\n```\nng build Onboarding\n```\n\n## Publish Library\n\n```\ncd dist/onboarding\nnpm publish\n```\n\n### Reference\n\nHow to create angular library [link](https://medium.com/@esanjiv/complete-beginner-guide-to-publish-an-angular-library-to-npm-d42343801660)\n\nCSS Spotlight [link](http://jsfiddle.net/XYXHR/)","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstories2%2Fangular-onboarding","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstories2%2Fangular-onboarding","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstories2%2Fangular-onboarding/lists"}