tnicola / ngx-joyride

Angular Joyride/Tour library
https://tnicola.github.io/ngx-joyride/
MIT License
245 stars 95 forks source link

Multi component home page issues #66

Closed Giantbean closed 5 years ago

Giantbean commented 5 years ago

This may be similar to issue #3 "not able to use multiple components." but that solution is not working.

I have a home landing page with button to start the tour in its component. Another component for a header and another for the side bar navigation. each with there own templateURL linking the component to an HTML file

The button on the landing page HTML starts the tour but skips the first joyride step on that page component and shows the tour for the navigation component.

I have tried <div joyrideStep="firstStep" [stepContent]="step1"> with <ng-template #step1> content... which stops the site from loading So I tried

The site loads but the step is skipped in the tour. The JoyrideService is imported on this Home pages .ts and the onClick is run from this component.ts while the JoyrideModule.forRoot() is on the app.module. I have tried importing JoyrideModule in the home module and the header module as well as JoyrideModule.forRoot and .forChild but all that just crashes the app again. The side bar lives on the app.component .html and it has joyrideStep="secondStep" [stepContent]="step2">
...etc. which work fine but the first step is passed over going directly to step 2. later when I leave the side nav and point the steps at the header it fails to open and just closes the tour. (No lazy loading)
Giantbean commented 5 years ago

Never mind. I got it working. It was a combination of the .forChild and the { steps: ['firstStep@home/homelanding/...', ... paths.

Thanks for the great Library!