Multipage tour about ngx-tour HOT 9 CLOSED

If they are all routes in the same Angular app, you can use the route property on the step configuration. If they're not in the same SPA, you probably want a different tour solution that runs outside of Angular.

from ngx-tour.

I did begin with using the route property. It successfully navigates the router to the required URL but I can't get the "tour" to be shown there.

As quoted in the documentation :

The route to which the tour should navigate before attempting to show this tour step. If undefined, no navigation is attempted.

The route is navigated to another page but the tour is shown on the earlier page itself.
I don't seem to understand what I'm doing wrong.

from ngx-tour.

I'm not sure - can you share some of your code? It could very well be a bug.

from ngx-tour.

This is a snippet from the component I am beginning the tour from. When clicked "next" on angular.ui.tour, the router is navigated to the otherComponent and the installation anchor is formed on this component.

bootstrapTour() {
        this.tourService.initialize([{
            stepId: 'start.tour',
            anchorId: 'start.tour',
            content: 'Welcome to the Ng2-Tour tour!',
            placement: 'below',
            title: 'Welcome',
        }, {
            stepId: 'angular.ui.tour',
            anchorId: 'angular.ui.tour',
            content: 'angular-ui-tour',
            title: 'angular.ui.tour',
        }, {
            anchorId: 'installation',
            route: 'workspace/anotherComponent',
            content: 'First, install the library...',
            title: 'Installation',
        }]);
        this.tourService.start();
    }

This is how the template looks for the above component

<section class="page-header">
    <h1 class="project-name">Ng2 Tour</h1>
    <a style="cursor: pointer" (click)="tourService.toggle()" class="btn btn-primary" tourAnchor="start.tour">Anchor 1</a>
</section>
<section class="page-header">
    <h1 class="project-name">Ng2 Tour</h1>
    <a style="cursor: pointer" class="btn btn-primary" tourAnchor="angular.ui.tour">Anchor 2</a>
</section>
</section>
<section class="page-header">
    <h1 class="project-name">Ng2 Tour</h1>
    <a style="cursor: pointer" class="btn btn-primary" tourAnchor="installation">Anchor 3</a>
</section>

I am not sure how to connect TourService tn the other component. It has a similar component and template as of now.

In the first snippet, when I keep the route as the current component's URL as,

...
 {
            anchorId: 'installation',
            route: 'workspace/thisComponent',
            content: 'First, install the library...',
            title: 'Installation',
}
...

The third section displays the anchor, which is why I said that the tour step is shown on the previous page itself.

from ngx-tour.

On the workspace/anotherComponent route, you need to have a tag with tourAnchor="installation" on it. Can you show me the template for that component?

from ngx-tour.

workspace/thisComponent : Component where I begin the tour
workspace/anotherComponent : The next component where I would like to take the user on the press of next button.

The above snippets happen to be from thisComponent itslef. Thus, yes, there does exist a tag with tourAnchor="installation" in that component. I'm sorry, the above was a typographic error. I have corrected it now.

from ngx-tour.

This piece of html

<section class="page-header">
    <h1 class="project-name">Ng2 Tour</h1>
    <a style="cursor: pointer" class="btn btn-primary" tourAnchor="installation">Anchor 3</a>
</section>

Needs to be in workspace/anotherComponent, not workspace/thisComponent. The third step that you defined is telling the tour library to navigate to the workspace/anotherComponent route and then look for a tourAnchor="installation" directive.

from ngx-tour.

That worked!
I had tourAnchor="installation" directive in both workspace/thisComponent as well as workspace/anotherComponent, perhaps which is why there was a conflict.

Thank you very much for your time

from ngx-tour.

Glad to help.

from ngx-tour.