Naughty Programmer's Madness
Miss any of our Open RFC calls?Watch the recordings here! »


7.2.4 • Public • Published

ngxTourWizard 7.2.4

A cool Angular7+ module for intro tours!

Before starting


This library use CustomEvents. If you want compatibility with IE, you should add a polyfill to your app polyfills.ts.

See polyfill on gist


As you may know directives don't have a "Styles" property. So it's impossible to let them style your markup, unless you include an external CSS.

For this purpose the style of directives is compiled in

  • /styles/ngx-tour-wizard.css
  • /styles/ngx-tour-wizard.scss

Be sure of including at least one of these in your styles.css / styles.scss to get the basic style


$ npm install ngx-tour-wizard@latest

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import what you need from ngx-mat-lib
import { TourWizardModule } from 'ngx-tour-wizard';
  declarations: [
  imports: [
    // Specify the import
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

You can optionally use the forRoot() method and pass tourWizardDefaults as follows

// ...
providers: [
        backdropTarget: ".my-selector",
        backdropEnabled: true,
        keyboardEnabled: false
// ...

Once your library is imported, you can use its components, directives and pipes in your Angular application:

<!-- You can now use your library component in app.component.html -->
<span class="tour-wizard-button tour-wizard-text-gloria"
    Start tour
<any class="tour-wizard-text-gloria" tourWizardAnchor="FOO_1">MY ANCHOR 1 </any>
<any class="tour-wizard-text-gloria" tourWizardAnchor="FOO_2">MY ANCHOR 2 </any>
<any class="tour-wizard-text-gloria" tourWizardAnchor="FOO_3">MY ANCHOR 3</any>
constructor(private _tourWizardService: TourWizardService) {
ngOnInit(): void {
            anchorId: "FOO_1",
            content: "Some text for FOO 1",
            title: "First"
            anchorId: "FOO_2",
            content: "Some other stuff for FOO 2",
            title: "Second"
            anchorId: "FOO_3",
            content: "Let's finish this up!!!",
            title: "Third"
    ] as TourWizardStep[]);
 startTour(): void {

Versioning NgxTourWizard will be maintained under the Semantic Versioning guidelines as much as possible. Releases will be numbered with the following format:


And constructed with the following guidelines:

Breaking backward compatibility bumps the major (and resets the minor and patch) New additions, including new icons, without breaking backward compatibility bumps the minor (and resets the patch) Bug fixes, changes to brand logos, and misc changes bumps the patch For more information on SemVer, please visit


MIT © Tony Samperi

This library is free, open source, and GPL friendly. You can use it for commercial projects, open source projects, or really almost whatever you want.

Attribution is required by MIT, SIL OLF, and CC BY licenses. Downloaded files already contain embedded comments with sufficient attribution, so you shouldn't need to do anything additional when using these files normally.


  • IMPORTANT!! Add optional ID for backdrop, or custom backdrop
  • Optional pause on click outside
  • Add option to remove backdrop and kboard on end?
  • Disable tour on route change??


npm i ngx-tour-wizard

DownloadsWeekly Downloads






Unpacked Size

575 kB

Total Files


Last publish


  • avatar