angular9

ngx-joyride not showing when click on button

I have implemented ngx-joyride for the demo purpose of my website.

But it is not showing anything when clicking on the button (joyride is button).

I am attaching the screenshot of my angular 9 browser console and webpage so that you can get better idea.

Please help me to resolve the issue. Thanks in advance.Error and browser dom

//Angular 9 code 
import {
  Component,
  OnInit,
  ElementRef,
  ViewChild,
  AfterViewInit,
} from "@angular/core";
import { JoyrideService } from "ngx-joyride";

@Component({
  selector: "app-temporary",
  templateUrl: "./temporary.component.html",
  styleUrls: ["./temporary.component.scss"],
})
export class TemporaryComponent implements OnInit, AfterViewInit {
  constructor(private joyride: JoyrideService) {}

  @ViewChild("ele1", { static: false }) ele1: ElementRef;
  @ViewChild("ele2", { static: false }) ele2: ElementRef;

  ngOnInit(): void {}
  ngAfterViewInit() {
    console.log("1", this.ele1);
    console.log("2", this.ele2);
  }

  //ngx-joyride-tour
  onClick() {
    // alert("coming here 1");

    console.log("joyrideService", this.joyride);
    this.joyride
      .startTour({ steps: ["ONE", "TWO"], logsEnabled: true })
      .subscribe(
        (step) => {
          console.log("coming step section");
          console.log(step);
        },
        (error) => {
          console.log("coming in error section");
        },
        () => {
          console.log("tour finished");
        }
      );
  }
}
<div>
    <button class="btn btn-sm btn-primary" (click)="onClick()">joyride</button>
    <div joyrideStep="ONE" title="Page Title" text="Main title!" #ele1>Text</div>
    <div joyrideStep="TWO" title="Page Title" text="Main title!" #ele2>Div content</div>
</div>
<h1>Temporary PAge</h1>

Solution

  • There were mistaken by us we have not added a joyride module with forChild() in lazy loaded modules.