DEV Community

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

Posted on • Updated on


ngx-joyride: how to skip null step


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


  • 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';

  providedIn: 'root',
export class WebGuideServiceCopy {

  // is joyride running
  isRunning$ = new BehaviorSubject<boolean>(false);

  get running() {
    return this.isRunning$.value;

    private joyrideService: JoyrideService,
    private joyrideStepService: JoyrideStepService
  ) {}

   * @param steps
   * @param showCounter
    steps: string[],
    showCounter: boolean = false,
    startWith: string = steps[0]
  ): void {
    console.log('tours', steps);
        steps: steps,
        showCounter: showCounter,
        themeColor: '#003f9e',
        stepDefaultPosition: 'bottom',
        startWith: startWith,
        (currentStep) => {
          const currentStepElement = document.querySelector(

          if (!currentStepElement) {
            // skip this step
        (error) => {
        () => {
          // when joyride close

Enter fullscreen mode Exit fullscreen mode

Latest comments (0)

An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.