ngx-custom-tour v1.1.2

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.

Versions

Breaking change

Starting from 1.x.x selector is not required anymore. Instead we have order which REQUIRED and must be UNIQUE.

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();
}

}

```html
<!-- 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 order attribute is required! others is up to you
  -->
</tour-step>

NOTE:

order MUST BE unique

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.