Onboarding for angular7

!demo

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.

$3

btnNextText
- Set next button text.

btnPrevText
- Set previous button text.

btnDoneText
- Set done button text.

$3

`
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
``

$3

How to create angular library link

CSS Spotlight link