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);
        }
      );
  }
}