How it works?
Demo
https://miraxes.github.io/angular-custom-tour
Custom tour with Angular 2+
Follow instructions and everything should be fine. :)
Usage
- install
npm install angular-custom-tour --save
In your module (app.module.ts)
Initialize it in your page component
In case you want to init slider after pageload, you should use ngAfterViewInit
<!-- Bluring element insert on top of the page--> <!-- start TOUR --> START! <!-- Each step could be placed at ANYWHERE --> WOW! <!-- ANY HTML HERE NOTE: ONLY selector attribute is required! others is up to you -->
## NOTE:
selector MUST BE unique, so you can highlight Element once
Styles
You need to inject styles from styles/main.css
if you are using angular CLI -> angular-cli.json
"styles": [
...
"styles.scss",
"../node_modules/angular-custom-tour/styles/main.css"
...
],
Custom options Usage
startTour
HintOptions
option | default | Usage |
---|---|---|
elementsDisabled: boolean | true | Disabling highlightedElement (click) wont work |
dismissOnOverlay: boolean | false | Go to next step when clicking on overlay (close tour if this is last step) |
defaultPosition: string | 'bottom' | Position of tour step to highlightedElement |
defaultOrder: number | 99 | Order of showing steps |
defaultLayer: number | 15 | Distance between highlightedElement and step in px |
applyRelative: boolean | true | Applying position:relative to highlightedElement (disable in case you want to highlight absolute positioned elements) |
Hint service events
event | Description |
---|---|
finish$ | When tour is finished |
showingStep$ | On each step show (Params > CurrentStep) |
This module in active development mode, if you have any suggestions feel free to contact me.