Description
I have added tour guide in my angular project using ngx-joyride. This is superb package, easy to implement.
I have to show steps in multiple components, it is working using the route.
I have a created an array with all the steps in it. And using a button, the tour is initialized using the startTour().
In one of my page, I need to reopen the guide using a click on the info icon in the image. Is it possible without calling the same startTour() which is used in the button click with only one step `
let steps = ['step1','step2@user','step3@user','step4@user/details']
let rideOptions: JoyrideOptions = {
steps: steps,
showCounter: false,
stepDefaultPosition: 'bottom',
showPrevButton: true,
logsEnabled: true,
waitingTime: 600,
}
this.joyrideService.startTour(rideOptions);
From this example, I need to open the step3 when I click the joyride directive in the user. All other step should be hidden.
If I set the showCounter
as false, the button position is moved to the left side. I have added some styles to the button like background color, color and border-radius.
This is how the button looks like.
"dependencies": {
"@angular/core": "^11.2.11",
"ngx-joyride": "^2.4.0",
}
Thanks 👍