This is a product tour library built with Angular (2+). It's inspired by angular-ui-tour. and by Isaacplmann .
npm install bm-ng2-tour
BmTourModule
into your app module<tour-step-template></tour-step-template>
to your root app componentbmTourAnchor
directive throughout your app.
<div bmTourAnchor="some.anchor.id">...</div>
tourService.initialize(steps)
this.tourService.initialize([{{ '{' }} anchorId: 'some.anchor.id', content: 'Some content', title: 'First', }, {{ '{' }} anchorId: 'another.anchor.id', content: 'Other content', title: 'Second', }]);
tourService.start()
The TourService
controls the tour. Some key functions include:
Each step can have the following properties.
Name | Type | Default | Description |
---|---|---|---|
stepId | string | "" | A unique identifier for the step |
anchorId | string | required | The anchor to which the step will be attached |
title | string | "" | The title of the tour step |
content | string | "" | The content text of the tour step |
route | string | UrlSegment[] | undefined | The route to which the tour should navigate before attempting to show this tour step. If undefined, no navigation is attempted. |
nextStep | number | string | undefined | The step index or stepId of the next step. If undefined, the next step in the steps array is used. |
prevStep | number | string | undefined | The step index or stepId of the previous step. If undefined, the previous step in the steps array is used. |
placement | 'above' | 'below' | 'after' | 'before' | 'left' | 'right' | 'top' | Where the tour step should placed with respect to the anchor. 'before' and 'after' are synonyms for 'left' and 'right' respectively. When RTL support is implemented, 'before' and 'after' will swap directions when RTL mode is enabled. |
preventScrolling | boolean | false | Tour steps automatically scroll to the middle of the screen, if they are off the screen when shown. Setting this value to true will disable the scroll behavior. |
You can set default values in the TourService.initialize
function.
this.tourService.initialize(steps, {{ '{' }} route: '', placement: 'left', preventScrolling: true, });
Any value explicitly defined in a step will override the default value.
Hotkeys are provided through the angular2-hotkeys library. Hotkeys are enabled when the tour starts and disabled when the tour ends.
The TourService
emits events that can be subscribed to like this:
this.tourService.initialize$.subscribe((steps: IStepOption[]) => {{ '{' }} console.log('tour configured with these steps:', steps); });
Name | Payload | Emitted When |
---|---|---|
stepShow$ | IStepOption | A step is shown |
stepHide$ | IStepOption | A step is hidden |
initialize$ | IStepOption[] | The tour is configured with a set of steps |
start$ | IStepOption | The tour begins |
end$ | any | The tour ends |
pause$ | IStepOption | The tour is paused |
resume$ | IStepOption | The tour resumes |
anchorRegister$ | string | An anchor is registered with the tour |
anchorUnregister$ | string | An anchor is unregistered from the tour |