This is new a bit extended version of https://github.com/miraxes/angular-custom-tour.

For versions less than Angular v6, please use older version of this library.

Usage

• install npm install ngx-custom-tour --save

In your module (app.module.ts)

import { NgxCustomTourModule } from 'ngx-custom-tour'

@NgModule({
  ...
  imports: [
    ...
    NgxCustomTourModule // Put here
    ...
  ]
  ...
]

Note: You'll need to import BrowserAnimationsModule too;

Initialize it in your page component

In case you want to init slider after pageload, you should use ngAfterViewInit

import { NgxCustomTourService } from 'ngx-custom-tour'

@Component({
  ...
  providers: [... NgxCustomTourService ... ],
  ...
})

class AppComponent {

  constructor(public customTourService: NgxCustomTourService){ }

  startTour() {
    this.customTourService.initialize();
  }

}

<!-- Bluring element insert on top of the page-->
<ngx-custom-tour-overlay></ngx-custom-tour-overlay>

<!-- start TOUR -->
<button name="button" (click)="startTour()"> START!</button>

<!-- Each step could be placed at ANYWHERE -->
<div class="i-want-highlight-this" id="highlight-me"> WOW!</div>

<tour-step selector="highlight-me" [order]="3" position="right" title="title string">
  <!-- ANY HTML HERE
    NOTE: ONLY selector attribute is required! others is up to you
  -->
</tour-step>

NOTE:

selector MUST BE unique, so you can highlight Element once

Styles

You need to inject styles from node_modules/ngx-custom-tour/styles/styles.scss

Feel free to import those styles directly to your scss Also, we added some scss variables to let you adjust styles just in one line.

Scss variables

Custom options Usage

  startTour() {
    this.customTourService.initialize({elementsDisabled: false}); // HintOptions
  }

HintOptions

Hint service events

This module in active development mode, if you have any suggestions feel free to contact me.