Skip to content

Position of the button moved to the left if the showCounter is FALSE #580

Open
@agreeshvs

Description

@agreeshvs

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.

image

This is how the button looks like.

"dependencies": {
 "@angular/core": "^11.2.11",
"ngx-joyride": "^2.4.0",
}

Thanks 👍

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions