Onboarding with ngrx

Setup

Import module, place component in root app, set steps (OnboardingSetSteps(OnboardingItem[]))

Inputs <onboarding>

property | default --- | --- auditTime number | 0 margin number | 10 navigatorMargin number | 20 navigator ComponentType<any> | OnboardingNavigatorComponent

Custom navigator

Make your custom component and use things like below to navigate:

export class OnboardingNavigatorComponent implements OnInit
{
    onboardingData: Observable<OnboardingNavigatorData>;
    
    
    
    constructor( private store: Store<any> )
    {
    }
    
    ngOnInit()
    {
        this.onboardingData = this.store.pipe( select( getOnboardingNavigatorData ) );
    }
    
    next()
    {
        this.store.dispatch( new OnboardingNext );
    }
    
    prev()
    {
        this.store.dispatch( new OnboardingPrevious );
    }
    
    end()
    {
        this.store.dispatch( new OnboardingEnd );
    }
}

OnboardingItem

property | reqired --- | --- content string | yes selector string | no title string | no link string | no before Function | no delay number | no

Actions

• OnboardingSetSteps ( data: OnboardingItem[] )
• OnboardingSetCurrent ( value: number )
• OnboardingUpdatePosition
• OnboardingStart
• OnboardingEnd
• OnboardingNext
• OnboardingPrevious

Required styles

@import '~@angular/cdk/overlay';
@include cdk-overlay();

.onboarding-overlay
{
    z-index          : 1000; // or other value
    position         : fixed;
    background-color : rgba(0, 0, 0, 0.5);
}

Example

import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { OnboardingItem, OnboardingSetSteps, OnboardingStart } from '@tk-ng/onboarding';



@Component( {
    selector: 'app-root',
    template: `
        <onboarding></onboarding>
        
        <a routerLink="/a" class="btn btn-link">a</a>
        <a routerLink="/b" class="btn btn-link">b</a>
        <hr>
        <button (click)="start()">start</button>
        <div style="margin: 100px; height: 100px; width: 200px; background: antiquewhite" class="item-1">lorem ipsum</div>
        <div style="margin-top: 150px; margin-right: 50px; padding: 20px; height: 100px; width: 200px; background: antiquewhite" class="item-2">lorem ipsum</div>
        
        <router-outlet></router-outlet>
    `,
} )
export class AppComponent implements OnInit
{
    constructor( private store: Store<any> )
    {}
    
    
    
    start()
    {
        this.store.dispatch( new OnboardingStart );
    }
    
    
    
    ngOnInit()
    {
        const steps: OnboardingItem[] = [
            { selector: '.item-1', title: 'title 1', content: 'lorem ipsum', link: '/a' },
            { selector: '.item-2', content: 'lorem ipsum 2', link: '/b', before: () => {console.log( 'step 2' ); } },
            { content: 'lorem ipsum 3', link: '/b', before: () => {console.log( 'step 3' ); } },
        ];
            
        this.store.dispatch( new OnboardingSetSteps( steps ) );
    }
}