DEV Community

Nguyễn Hữu Hiếu
Nguyễn Hữu Hiếu

Posted on • Edited on

ngx-joyride: how to skip null step

problem

  • ngx-joyride: in some case we want to skip null step

solution

  • create web-guide service and add skip step if current step is not found in document tree
import { Injectable } from '@angular/core'; import { JoyrideService, JoyrideStepService } from 'ngx-joyride'; import { BehaviorSubject } from 'rxjs'; @Injectable({ providedIn: 'root', }) export class WebGuideServiceCopy { // is joyride running isRunning$ = new BehaviorSubject<boolean>(false); get running() { return this.isRunning$.value; } constructor( private joyrideService: JoyrideService, private joyrideStepService: JoyrideStepService ) {} /** * * @param steps * @param showCounter */ startTour( steps: string[], showCounter: boolean = false, startWith: string = steps[0] ): void { this.isRunning$.next(true); console.log('tours', steps); this.joyrideService .startTour({ steps: steps, showCounter: showCounter, themeColor: '#003f9e', stepDefaultPosition: 'bottom', startWith: startWith, }) .subscribe( (currentStep) => { const currentStepElement = document.querySelector( `[joyridestep='${currentStep.name}']` ); if (!currentStepElement) { // skip this step this.joyrideStepService.next(); } }, (error) => { console.log(error); }, () => { // when joyride close this.isRunning$.next(false); } ); } } 
Enter fullscreen mode Exit fullscreen mode

Top comments (0)