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

| angular | library | | ----------------- |:-----------:| | below v12 | 0.1.6 | | v13 | 0.1.7 | | v14 | 1.1.0 |

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

}

<!-- 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

| variable | default | | -------------------------- |:-----------------:| | $ct-overlay-opacity | rgba(0, 0, 0, .6) | | $ct-header-font-size | 14px | | $ct-container-min-width | 200px | | $ct-primary-color | #00b2f2 | | $ct-secondary-color | #8D0876 |

Custom options Usage

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

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 | | 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.