[]() []()

This library is for Angular versions less than 6, for newer versions of Angular please use https://github.com/miraxes/ngx-custom-tour

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)

  import { HintModule } from 'angular-custom-tour'

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

Initialize it in your page component

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

import { HintService } from 'angular-custom-tour'

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

class AppComponent {

constructor(public hintService: HintService){ }

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

}

  ```html
  <!-- Bluring element insert on top of the page-->
  <tour-overlay></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 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() {
    this.hintService.initialize({elementsDisabled: false}); // HintOptions
  }

HintOptions

Hint service events

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