https://github.com/stories2/angular-onboarding
Onboarding library for angular 7
https://github.com/stories2/angular-onboarding
angular-library angular-material angular7 onboarding onboarding-screen
Last synced: about 2 months ago
JSON representation
Onboarding library for angular 7
- Host: GitHub
- URL: https://github.com/stories2/angular-onboarding
- Owner: stories2
- License: mit
- Created: 2020-04-23T05:06:39.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T17:24:50.000Z (over 2 years ago)
- Last Synced: 2025-03-18T14:12:41.926Z (2 months ago)
- Topics: angular-library, angular-material, angular7, onboarding, onboarding-screen
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/story-onboarding
- Size: 1.66 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Onboarding for angular7
Show onboarding for angular 7.
## How to use
```
```
`story`
- Set onboarding flow array.
`gap`
- Set gap between highlighted DOM and onboarding popup.
`done`
- Trigger when onboarding is ended.
### Optional
`btnNextText`
- Set next button text.
`btnPrevText`
- Set previous button text.
`btnDoneText`
- Set done button text.
### Story board data
```
storyBoard = [
{
id: 'h1Wellcome',
text: 'This is wellcome',
direction: 'bottom'
},
{
id: 'angularIcon',
text: 'This is icon',
direction: 'right'
},
{
id: 'angularIcon',
text: 'This is icon',
direction: 'left'
},
...
{
id: 'cli',
text: 'This is cli',
direction: 'bottom'
},
{
id: 'blog',
text: 'This is blog',
direction: 'bottom'
}
] as StoryOnboardingModel[];
```
`id`
- Will highlight DOM's ID
```
Welcome to {{ title }}!
```
`text`
- Onboarding message.
`direction`
- Onboarding view's direction. `left`, `top`, `right`, `bottom` avaliable.
-------------------------
`app.module.ts`
```
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { OnboardingModule } from 'story-onboarding';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
OnboardingModule // <-- onboarding module
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
OR
`app.module.ts`
```
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { MatButtonModule, MatCardModule } from '@angular/material';
import { OnboardingComponent } from 'story-onboarding';
@NgModule({
declarations: [
AppComponent,
OnboardingComponent // <-- onboarding component
],
imports: [
BrowserModule,
MatButtonModule, // <-- needed
MatCardModule // <-- needed
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
## Build Library
```
ng build Onboarding
```
## Publish Library
```
cd dist/onboarding
npm publish
```
### Reference
How to create angular library [link](https://medium.com/@esanjiv/complete-beginner-guide-to-publish-an-angular-library-to-npm-d42343801660)
CSS Spotlight [link](http://jsfiddle.net/XYXHR/)