tnicola / ngx-joyride Goto Github PK

ngx-joyride works fine on my app but i am unable to scroll the page while using the tour. It does not as well autoscroll to the next step. I'm not sure where it goes wrong. I saw an issue about this on ngx-joyride previous old version but that apparently has been fixed during update version 2.2.2. Can you check on this issue. Im using angular 7 and chrome version 72.0.3626.121

Describe the bug

Hi, super module you've got set up here. I encountered a small issue while I was using it though. When the tour encounters a step that's supposed to be on an element that's hidden (ngIf'ed in my case) it seems to skip the step like I'd expect, however it doesn't increment the count that it's using to keep track of the steps. The tour continues on just fine but when I get to the last step in the tour, I encounter a 'Next' button instead of a 'Done' button (I'm assuming because of the count?) and clicking 'Next' covers the page in a scrim with no tour step, necessitating a refresh.

I've done some checking to just call JoyrideService.closeTour() you recently added to the next attribute of my last step, but it seems like something that should also be checked and handled in the framework itself.

To Reproduce
Steps to reproduce the behavior:

1. Set up a tour with several steps
2. Hide some of the elements pointed to in some steps
3. Continue the tour to completion.

Expected behavior

A clean exit on the last tour step passed in the startTour() call.

Screenshots

Last step with incorrect step position:

After clicking next without manually calling closeTour():

Details (please complete the following information):

• Browser: Google Chrome | 72.0.3626.96 (Official Build) (32-bit)
• Dependencies:
  "@angular-mdc/web": "^0.43.7",
  "@angular/animations": "~7.2.0",
  "@angular/cdk": "^7.3.1",
  "@angular/common": "~7.2.0",
  "@angular/compiler": "~7.2.0",
  "@angular/core": "~7.2.0",
  "@angular/forms": "~7.2.0",
  "@angular/http": "^7.2.3",
  "@angular/material": "^7.3.2",
  "@angular/platform-browser": "~7.2.0",
  "@angular/platform-browser-dynamic": "~7.2.0",
  "@angular/router": "~7.2.0",
  "@ngxs/logger-plugin": "^3.3.4",
  "@ngxs/storage-plugin": "^3.3.4",
  "@ngxs/store": "^3.3.4",
  "core-js": "^2.5.4",
  "ng2-nouislider": "^1.7.13",
  "ngx-joyride": "^2.2.6",
  "nouislider": "^13.1.0",
  "rxjs": "~6.3.3",
  "tslib": "^1.9.0",
  "zone.js": "~0.8.26"

Please add an option to start the tour at a specific step

I want to do away with the background color, is there a way.

P.s: it would be awesome if there are different color controls for title button and the background

Would it be possible to fix the flickering when the steps are switching?

i am using this for my angular2 application. and code for joyride is in app componet.ts/app.component.html. but i have 3 components where i want to show the tour(sidebar component, header component and dashboard component). is it possible that it will be work for all over application.

With a simple example to use the library it not found :/

Please help!

Describe the bug
Hi, I have two joyride steps with same name but in different tours and in different pages.
The first one is

irregolari: {
        title: 'Irregolari',
        text:
          'Puoi visualizzare le irregolari”'
      }

The other one is

irregolari: {
        stepPosition: 'center',
        title: 'Fatture irregolari',
        text:
          'Permette di visualizzare le irregolari”'
      },

When I start the tour in which I set the stepPosition, than I change page and start the other tour it uses the stepPosition of the other step.

To Reproduce
Steps to reproduce the behavior:

1. Create a page with <h1 joyrideStep="firstStep" stepPosition="center" title="Page Title" text="Main title!">Text</h1>
2. Create another page with <h1 joyrideStep="firstStep" title="Page Title" text="Main title!">Text2</h1>
3. Start the tour in the first page
4. Start the tour in the second page

Expected behavior
It should use default position in my example.

Details (please complete the following information):

• Browser Chrome 73.0.3683.103

• List of the dependencies with their version:

• "@angular-devkit/schematics": "^0.0.52",

• "@angular/animations": "^7.0.0",
  

• "@angular/cdk": "^7.0.0",
  

• "@angular/common": "^7.0.0",
  

• "@angular/compiler": "^7.0.0",
  

• "@angular/core": "^7.0.0",
  

• "@angular/forms": "^7.0.0",
  

• "@angular/http": "^7.0.0",
  

• "@angular/material": "^7.0.0",
  

• "@angular/material-moment-adapter": "^7.0.0",
  

• "@angular/platform-browser": "^7.0.0",
  

• "@angular/platform-browser-dynamic": "^7.0.0",
  

• "@angular/platform-server": "^7.0.0",
  

• "@angular/router": "^7.0.0",
  

• "ngx-joyride": "^2.2.9",
  

Hi, my app has sticky toolbar and due to auto scroll the highlighted part is going behind toolbar. Any suggestions

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Details (please complete the following information):

• Browser [e.g. chrome, safari] + version
• List of the dependencies with their version (Angular, rxjs, ngx-joyride,...)

Additional context
Add any other context about the problem here.

It would be nice to have a "stopTour" function. I have this use case that the application can be auto logged out due to an inactive timeout. And the auto logout can happen while the joyride overlay is on. And when this happened, the joyride layout display is on stuck on the incorrect page.

Thank you for creating ngx-joyride! I use it for a mobile application and whenever the text of a hint spans multiple lines, the joyride container has a width of 100%. I prefer it to be a bit smaller to keep the impression of a popup and added this to my angulars styles.css file:

/* limit width of joyride tour tips */
.joyride-step__container {
max-width: 90vw;
}

Maybe this is a worthwhile addition to the css in joyride.

First off, it's a great library! Really easy to use and implement! I've managed to make a custom content, but was wondering if it's possible to change the layout of the buttons and step counter? For example I would like to change the step counter from numbers to something visual like circles.

I've got at the moment

But would like to have

In my project I have a problem where I need to customize css for some specific step.
Currently there are no step specific classes for step holder and backdrop root.

My proposition is to add something like joyride-step-stepName and backdrop-stepName so we can customize styling for specific step. As step names are unique, this should'nt be a problem

Create a more simple set buttons text u.u

I have use this to my angular 5 application with angular material 5.0.1 and I have done the exactly same as mentioned in the Readme file. I have imported the module inside my module.ts file and calling the startTour method from the component.ts file but the issue is that guide popup is going behind the overlay. Can you please help me.

Describe the bug
when i try to compile my angular 7, this error occured after the v2.2.4 excluded :
ERROR in node_modules\ngx-joyride\joyride.d.ts.JoyrideStepComponent.html(1,47): : Object is possibly 'undefined'.

To Reproduce
ng build "--aot"

Expected behavior
no error when compiling my project.

Details (please complete the following information):
List of the dependencies :

"dependencies": {
"@angular/animations": "7.1.1",
"@angular/cdk": "7.1.1",
"@angular/common": "7.1.0",
"@angular/compiler": "7.1.0",
"@angular/core": "7.1.0",
"@angular/forms": "7.1.0",
"@angular/material": "7.1.1",
"@angular/material-moment-adapter": "7.3.2",
"@angular/platform-browser": "7.1.0",
"@angular/platform-browser-dynamic": "7.1.0",
"@angular/router": "7.1.0",
"@fortawesome/fontawesome-free": "5.6.1",
"@fullpage/angular-fullpage": "0.0.10",
"@mat-datetimepicker/core": "2.0.1",
"@mat-datetimepicker/moment": "2.0.1",
"@netbasal/ngx-content-loader": "2.1.0",
"@ngx-i18nsupport/tooling": "1.1.1",
"@nomadreservations/ngx-stripe": "1.1.0",
"@swimlane/ngx-charts": "10.0.0",
"@tinymce/tinymce-angular": "3.0.0",
"@types/socket.io-client": "1.4.32",
"bootstrap": "4.1.3",
"core-js": "2.5.4",
"dragula": "3.7.2",
"fullcalendar": "4.0.0-alpha",
"fullcalendar-scheduler": "4.0.0-alpha.2",
"hammerjs": "2.0.8",
"highcharts": "7.0.3",
"highcharts-angular": "2.4.0",
"jquery": "3.3.1",
"jquery-bracket": "0.11.1",
"jwt-decode": "2.2.0",
"konva": "2.5.1",
"moment": "2.23.0",
"msutils": "file:../msutils",
"ng-fullcalendar": "1.7.1",
"ng2-konva": "6.0.0",
"ngx-captcha": "6.2.0",
"ngx-clipboard": "11.1.9",
"ngx-currency": "1.5.1",
"ngx-moment": "3.3.0",
"ngx-slick-carousel": "0.4.4",
"ngx-socket-io": "2.1.1",
"ngx-joyride": "2.2.9",
"rxjs": "6.3.3",
"slick-carousel": "1.8.1",
"stripe-angular": "0.3.0",
"tslib": "1.9.0",
"typescript-tslint-plugin": "0.2.1",
"zone.js": "0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "0.11.0",
"@angular/cli": "7.1.1",
"@angular/compiler-cli": "7.1.0",
"@angular/language-service": "7.1.0",
"@ngx-i18nsupport/ngx-i18nsupport": "1.1.0",
"@types/angular": "1.6.51",
"@types/jasmine": "3.3.1",
"@types/jasminewd2": "2.0.6",
"@types/jquery": "3.3.29",
"@types/jwt-decode": "2.2.1",
"@types/node": "8.9.4",
"codelyzer": "4.5.0",
"jasmine-core": "3.3.0",
"jasmine-spec-reporter": "4.2.1",
"karma": "3.1.1",
"karma-chrome-launcher": "2.2.0",
"karma-coverage-istanbul-reporter": "2.0.1",
"karma-firefox-launcher": "1.1.0",
"karma-jasmine": "2.0.1",
"karma-jasmine-html-reporter": "1.4.0",
"protractor": "5.4.0",
"sass-lint": "1.12.1",
"ts-node": "7.0.1",
"tslint": "5.12.0",
"tslint-eslint-rules": "5.4.0",
"typescript": "3.1.1"
}

Hey, I've been developing a tour with this library for the past week and it's really solid.

I've had to make a tweak to the application so we can create dynamic steps and wanted to know if there will be a way of doing this in the future or if there's a way of doing it now differently then I am.

currently my code looks like this:
this.joyrideService.stepService.optionsService.stepsOrder[17] = 'clientFirstStep@clients/' + id;

The compiler complains that stepService is private and ready only so we switched it to public before building our project. Would it be possible to update it so we can add or edit steps during the tour?

Making step service public also allowed us to implement iterating through tour using our mouse keys by utilizing the next, prev and done function.

this.joyrideService.stepService.next();
this.joyrideService.stepService.prev();
this.joyrideService.stepService.done();

having issue once tour is navigate to different route

Step not found in the DOM. Check if it's hidden by *ngIf directive.
Can you help me out in this issue.

If not, any other product tour library you'd recommend? (for Angular 7)

How to use it with UI Router and also with Lazy Loading ?

Initial translations variables gets picked up by joyride steps... But when I switch language... translations inside steps don't get updated?

Any idea?

I want the 'x' close button to behave differently than the 'done' button. Is there a way to assign a function to the done button without having to modify the package itself?

Is there a way to target specific parts of a list that is getting loaded from typescript. For example, making a list of field names in typescript and on the html just looping through the form and getting the different fields to show but with joyride i wanna say target just the first name field then another one rather then the whole div thats rendering it.

Hey man, how are you, i hope that will be everything all right =)

Man, after update the component to the new version i started to receive some errors in my "console.log" and by conseguence, my system broken.

I wiil attach one image of my console to be more clear what is the error. I'm receiving this error 164 times in console.

could you help me with this error?

I found one possible solution in the google, that is change in some places of my code, to be more exactly where i'm using:

providers: [{provide: ......, useClass: .....}] to providers: [{provide: ......, useValue: .....}], this change had a great impact on my system, then again, could you help me =/?

Angular Version: 5

Hi there,

The tour i build into my app using this library is working in chrome as expected. My company still uses IE11 a lot, so we have to support this browser as well.

Strangely the tour is not working in IE11. There is no error message, everything seems fine. The function itself has a console.log, so i know it get's executed.

the tour just does not appear on screen.

I get
TypeError: sink._addParentTeardownLogic is not a function
at ReplaySubject.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:26)

when running ngx-joyride with:
rxjs -v 6.3.2

Could you help?

Describe the bug
A clear and concise description of what the bug is.

Library does not work for Angular 5 after version 2.2.2.
An error appears in the console:

TypeError: Object(...) is not a function
    at t.setAsyncText (ngx-joyride.esm.js:1)
    at t.ngAfterViewInit (ngx-joyride.esm.js:1)
    at callProviderLifecycles (core.js:12428)
    at callElementProvidersLifecycles (core.js:12399)
    at callLifecycleHooksChildrenFirst (core.js:12383)
    at checkAndUpdateView (core.js:13516)
    at callViewAction (core.js:13858)
    at execComponentViewsAction (core.js:13790)
    at checkAndUpdateView (core.js:13514)
    at callViewAction (core.js:13858)

To Reproduce
Steps to reproduce the behavior:

My dependencies:

"dependencies": {
   "@angular/animations": "5.0.3",
   "@angular/cdk": "5.0.3",
   "@angular/common": "5.0.3",
   "@angular/compiler": "5.0.3",
   "@angular/core": "5.0.3",
   "@angular/forms": "5.0.3",
   "@angular/http": "5.0.3",
   "@angular/material": "5.0.3",
   "@angular/platform-browser": "5.0.3",
   "@angular/platform-browser-dynamic": "5.0.3",
   "@angular/router": "5.0.3",
   "ngx-joyride": "2.2.3",
   ...

Expected behavior
A clear and concise description of what you expected to happen.

For library to work with Angular 5 😄

Additional context
Add any other context about the problem here.

The only difference that could impact this is that you switched to angular 7 on version 2.2.3.
Can you please see if you can fix this, or at least create another version which reverts your angular to 6, because upgrading is currently not an option for me.

I am trying send the title string as :

<a joyrideStep="name"
[title]="'app.transaltion.name' | translate">

At runtime the title is empty!!

Hi all,

I have a step that depends on the end of a css animation to be correctly positioned.

Is there a way that I can navigate to the next step programmaticaly (ex: using the StepService) but that does not mess up with the rest of the flow?

I used this:
this.joyrideStepService.next(); this.joyrideStepService.prev();

but afterwards the flow was messed up with 2 popovers.

I followed steps in README with latest version, faced below issue,

calling this.joyrideService.startTour(); on click of a button.

Using Angular 5.

ERROR TypeError: Cannot read property 'targetViewContainer' of undefined
at t.showCurrentStep (angular2-joyride.esm.js:formatted:1)
at t.startTour (angular2-joyride.esm.js:formatted:1)
at t.startTour (angular2-joyride.esm.js:formatted:1)
at HomeComponent.onClick (home.component.ts:26)
at Object.eval [as handleEvent] (HomeComponent.html:2)
at handleEvent (core.js:13547)
at callWithDebugContext (core.js:15056)
at Object.debugHandleEvent [as handleEvent] (core.js:14643)
at dispatchEvent (core.js:9962)
at eval (core.js:10587)

Note:
I was not facing this issue with version 0.0.5, @tnicola, need help on this.

Metadata version mismatch for module /var/www/html/angular4/lms-poc/node_modules/ngx-joyride/joyride.d.ts, found version 4, expected 3

pj@pj-HP-EliteBook-840-G1:/var/www/html/angular4/lms-poc$ sudo ng serve
Your global Angular CLI version (7.3.0) is greater than your local
version (1.4.7). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2019-04-14T13:24:40.696Z                                                        
Hash: fe53d4b3d8514aa15f4d
Time: 2809ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 1.06 kB {vendor} [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 323 bytes {inline} [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 11.3 kB {inline} [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 338 kB [initial] [rendered]

ERROR in /var/www/html/angular4/lms-poc/node_modules/ngx-joyride/src/services/joyride-steps-container.service.d.ts (6,12): In ambient enum declarations member initializer must be constant expression.
ERROR in /var/www/html/angular4/lms-poc/node_modules/ngx-joyride/src/services/joyride-steps-container.service.d.ts (7,12): In ambient enum declarations member initializer must be constant expression.
ERROR in Error: Metadata version mismatch for module /var/www/html/angular4/lms-poc/node_modules/ngx-joyride/joyride.d.ts, found version 4, expected 3, resolving symbol AppModule in /var/www/html/angular4/lms-poc/src/app/app.module.ts, resolving symbol AppModule in /var/www/html/angular4/lms-poc/src/app/app.module.ts, resolving symbol AppModule in /var/www/html/angular4/lms-poc/src/app/app.module.ts
    at syntaxError (/var/www/html/angular4/lms-poc/node_modules/@angular/compiler/bundles/compiler.umd.js:1729:34)
    at simplifyInContext (/var/www/html/angular4/lms-poc/node_modules/@angular/compiler/bundles/compiler.umd.js:24979:23)
    at StaticReflector.simplify (/var/www/html/angular4/lms-poc/node_modules/@angular/compiler/bundles/compiler.umd.js:24991:13)
    at StaticReflector.annotations (/var/www/html/angular4/lms-poc/node_modules/@angular/compiler/bundles/compiler.umd.js:24418:41)
    at _getNgModuleMetadata (/var/www/html/angular4/lms-poc/node_modules/@angular/compiler-cli/src/ngtools_impl.js:138:31)
    at _extractLazyRoutesFromStaticModule (/var/www/html/angular4/lms-poc/node_modules/@angular/compiler-cli/src/ngtools_impl.js:109:26)
    at Object.listLazyRoutesOfModule (/var/www/html/angular4/lms-poc/node_modules/@angular/compiler-cli/src/ngtools_impl.js:53:22)
    at Function.NgTools_InternalApi_NG_2.listLazyRoutes (/var/www/html/angular4/lms-poc/node_modules/@angular/compiler-cli/src/ngtools_api.js:91:39)
    at AotPlugin._getLazyRoutesFromNgtools (/var/www/html/angular4/lms-poc/node_modules/@ngtools/webpack/src/plugin.js:212:44)
    at _donePromise.Promise.resolve.then.then.then.then.then (/var/www/html/angular4/lms-poc/node_modules/@ngtools/webpack/src/plugin.js:448:24)
    at process._tickCallback (internal/process/next_tick.js:68:7)

webpack: Failed to compile.

Not a bug,but just wondering is this feature available. Great work btw

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Details (please complete the following information):

• Browser [e.g. chrome, safari] + version
• List of the dependencies with their version (Angular, rxjs, ngx-joyride,...)

Additional context
Add any other context about the problem here.

I am struggling to get this library to work in my Angular 6 project. I have spun up a brand new project with the CLI and followed the installation steps and it is giving this error (I can upload the repo if it will help):

Error: StaticInjectorError(AppModule)[AppComponent -> t]: 
  StaticInjectorError(Platform: core)[AppComponent -> t]: 
    NullInjectorError: No provider for t!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1060)
    at resolveToken (core.js:1298)
    at tryResolveToken (core.js:1242)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1139)
    at resolveToken (core.js:1298)
    at tryResolveToken (core.js:1242)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1139)
    at resolveNgModuleDep (core.js:8377)
    at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:9065)
    at resolveDep (core.js:9430)

Is Angular 6 supported at all, or are there plans to support it in the near future?

Thanks

I'm trying to route the steps through multiple components in angular 6 that has multiple routers but when I'm trying to route to it i keep getting this error no matter what i do.

ERROR TypeError: Cannot read property 'targetViewContainer' of undefined

Joyride cant find where the next step is because its under the same route tag but different component

Hi, I'm new to angular. How should I import the module? I dont see anything like :

"import { module } from '@module/module'"

module installation getting failed
$ sudo npm install ngx-joyride --save

(Angular4 application, node version: v10.15.1, npm version:6.4.1)

[email protected] install /var/www/html/AngularFirebase/node_modules/grpc
node-pre-gyp install --fallback-to-build --library=static_library

node-pre-gyp ERR! Tried to download(403): https://storage.googleapis.com/grpc-precompiled-binaries/node/grpc/v1.8.4/node-v64-linux-x64-glibc.tar.gz
node-pre-gyp ERR! Pre-built binaries not found for [email protected] and [email protected] (node-v64 ABI, glibc) (falling back to source compile with node-gyp)
node-pre-gyp ERR! Tried to download(undefined): https://storage.googleapis.com/grpc-precompiled-binaries/node/grpc/v1.8.4/node-v64-linux-x64-glibc.tar.gz
node-pre-gyp ERR! Pre-built binaries not found for [email protected] and [email protected] (node-v64 ABI, glibc) (falling back to source compile with node-gyp)

Failed at the [email protected] install script

Describe the bug

I am using version 2.0.0 of ngx-joyride in my angular application 5.2.11 and there are elements that are not highlighted. it works well in certain places of the html but in others it does not.

As shown in the attached file does not work:
bug.html.zip

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Details (please complete the following information):

• Browser [e.g. chrome, safari] + version
• List of the dependencies with their version (Angular, rxjs, ngx-joyride,...)

Additional context
Add any other context about the problem here.

I added Joyridemodule to a shared module that i imported into my lazy loaded modules.Getting the following error
Uncaught (in promise): Error: RouterModule.forRoot() called twice. Lazy loaded modules should use RouterModule.forChild() instead.
Error: RouterModule.forRoot() called twice. Lazy loaded modules should use RouterModule.forChild() instead.

If I only import it into the app module, I get this error
Cannot read property 'targetViewContainer' of undefined
at t.show (vendor.js:167584)
at vendor.js:167584
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:2743)
at Object.onInvokeTask (vendor.js:56347)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:2742)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (polyfills.js:2510)
at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (polyfills.js:2818)
at ZoneTask.invoke (polyfills.js:2807)
at timer (polyfills.js:4376)

What is the right way to use it across lazy loaded modules?

Hi there.
Thanks for your library. I tried using it following the instructions in the readme but I was unable to get it working.

As per the title, I get a this.currentStep is undefined error at JoyrideStepService.showCurrentStep, which is called by JoyrideStepService.startTour.

Im guessing this part this.currentStep = this.stepsContainerService.get(this.currentStepIndex); is the one returning undefined?

My code:

<div class="branding" joyrideStep [stepNumber]="1">
    ...
</div>
<div class="header" joyrideStep [stepNumber]="2">
    ...
</div>

constructor(..., private joyride: JoyrideService) {
    ...
    this.joyride.startTour();
}

Maybe Im missing something 😁 cheers.

P.S. Im using angular 5

When I am doing build for production server then its giving me a error i.e.
ERROR in ./node_modules/ngx-joyride/assets/images/close.svg
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
|
| <line x1="1" y1="24"
| x2="24" y2="1"
@ ./node_modules/ngx-joyride/esm5/ngx-joyride.esm.js 1:17918-17955
@ ./dist/server/main.bundle.js
@ ./server.ts @tnicola @giorgiapitteri

let's say i have a root component which has two other components implemented.

<app-root>
  <first joyrideStep="1"></first>
  <second joyrideStep="2"></second>
</app-root>

now the second component is a bit complex, and i want to highlight stuff inside that component, too.

<!-- second.component.html -->
<div>
  <h1 joyrideStep="2-1">headline</h1>
  <span joyrideStep="2-2">specific content</span>
</div>

How can i set this up, so i can browse through all 4 steps? What do i need to do when the sub component does not have it's own route, but is part of the current page the user is viewing?

startTour() {
  this.joyrideService.startTour( { steps: [ '1', '2', '2-1', '2-2' ] } )
}

Hello,

I've searched on the code but i couldn't find any way to subscribe when the tour is finished.

Is this implemented?

Thank you in advance

EDIT: I'm able to do this with the JoyrideStepsContainerService and checking if it's the last step. Our customer will probably want this implemented, if there isn't any implementation for this i'll try to write it.

Is it possible to add an optional time to wait before showing a step after going to the route defined in the step? For example in our app if you keep going to the next step it works perfectly as i build it so all the data is loaded for each page by the time the tour gets to it. But if you go back in the tour it needs to re-get some of the data in certain points and this causes the tour window to not be at the correct place as the place it needs to be does not yet exist

Describe the bug
The screen is flashing between steps. Because there is a gap between two steps. The backdrop is removed in a frame.

To Reproduce

1. Go to the current demo
2. Start the tour.
3. Click the next
4. See the error. Flashing screen.

Expected behavior
The screen should not flash. The backdrop should be enabled until it is disabled or the tour ends.

Screenshots

Browser: Chrome Version 72.0.3626.121 (Official Build) (64-bit)

I am adding the joyrideStep directive to an element that is part of my app's main layout. In my step order, I want to show it on an inner page to fit in with the flow of my tour. I noticed that sometimes the step would show and sometimes it wouldn't.

After doing some digging it looks like the issue is that the step ID that's created in ngAfterViewInit in the joyride directive appends the current route to the ID of the created step. The route that I want to show the step on isn't always the same as the route the step is initialized on, so when sortSteps is called in the JoyrideStepsContainerService, the stepName I registered and the step.id aren't the same and therefore is not included in this.steps.

Could we provide the route name that we'd like the step to be registered on so that the ID is generated properly? Alternatively, is there some way we could indicate in the step name or inputs that the step isn't dependent on a route?

How do i set a step to be anchorless... i do not want it to be associated with any element on the page, i simply want to center it on the page and have it pop up. I saw this in the demo but no details on how to make this happen.

My Steps look like this: steps: ['stepOne', 'stepTwo']