Skip to content
Angular2+ plugin for building a tour, showcase or a walkthrough for your app
TypeScript
Branch: master
Clone or download
hamdiwanis Syntactic sugar is added (#1)
Syntactic sugar is added
Latest commit fd84a43 Feb 16, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs add nextOn Dec 6, 2018
e2e first version Nov 29, 2018
projects/ngx-app-tour fix unfind step timeout Jan 22, 2019
src add nextOn Dec 6, 2018
.gitattributes change repo lang Nov 30, 2018
.gitignore fix prod build issue Nov 29, 2018
LICENSE add logo Dec 6, 2018
angular.json first version Nov 29, 2018
karma.conf.js first version Nov 29, 2018
logo.png add logo Dec 6, 2018
package.json add nextOn Dec 6, 2018
protractor.conf.js first version Nov 29, 2018
readme.md Syntactic sugar is added Feb 16, 2019
tsconfig.json first version Nov 29, 2018
tslint.json first version Nov 29, 2018
yarn.lock fix prod build issue Nov 29, 2018

readme.md

Ngx-App-Tour

Demo

This library built on the great lib ngx-tour by isaacplmann It also uses the popover component by my favourite angular ui lib ng-zorro-antd.

Installation

npm install ngx-app-tour

Add lib styles to your app for ex styles in angular.json:

"styles": [
    "node_modules/ngx-app-tour/styles/styles.css",
    ...
],

Usage

Add in your root module:

@NgModule({
  imports: [
    ...
    NgxAppTour.forRoot()
  ],
})
export class AppModule { }

Add in every other module you use it in:

@NgModule({
  imports: [
    ...
    NgxAppTour
  ],
})
export class AppModule { }

Add in every other module you use it in:

@NgModule({
  imports: [
    ...
    NgxAppTour
  ],
})
export class AppModule { }

Mark your tour steps with tourAnchor and give it an id:

<div tourAnchor="id"></div>

Enject TourService in a component:

constructor(public tourService: TourService) {}

Use the TourService to init tour tour:

this.tourService.initialize(steps[], defaults);

Use the TourService to control the tour:

this.tourService.start();
this.tourService.stop();
this.tourService.pause();
this.tourService.resume();

Use the TourService to listen for tour events:

this.tourService.events$.subscribe(e => do something)

Use custom step template:

<ng-template #stepTemplate let-step="step">
    <div class="step-container">
        <div class="custom-step-content">
            {{ step?.content }}
        </div>
        <div class="step-actions">
            <button class="step-btn" [disabled]="!tourService.hasPrev(step)" (click)="tourService.prev()">
                prev
            </button>
            <button class="step-btn" [disabled]="!tourService.hasNext(step)" (click)="tourService.next()">
                next
            </button>
            <button class="step-btn" (click)="tourService.end()">{{ step?.endBtnTitle }}</button>
        </div>
    </div>
</ng-template>
    @ViewChild('stepTemplate') stepTemplate;
 
    // then use it with a single step
    this.tourService.initialize([
       ...
       {
        ...
         stepTemplate: this.stepTemplate
       },
       ...
     ]);
     
     // or as default template
     
     this.tourService.initialize([...], {stepTemplate: this.stepTemplate});
     

Use touranchor--is-active class to style active step:

.touranchor--is-active{
    // your styles
}

Tour Step Options

export interface IStepOption {
  stepId?: string;
  anchorId?: string;
  title?: string;
  content?: string;
  route?: string | string[] | UrlSegment[];
  nextStep?: number | string;
  prevStep?: number | string;
  preventScrolling?: boolean;
  prevBtnTitle?: string;
  nextBtnTitle?: string;
  endBtnTitle?: string;
  disableBackdrop?: boolean;
  backdropColor?: string;
  backdropRadius?: string;
  /* Add ripple effect tour target */
  enableRippleEffect?: boolean;
  rippleColor?: string;
  /* Change step default template */
  stepTemplate?;
  /*  Use this to allow click, type..etc on tour target */
  allowInteractions?: boolean; // true if you set a nextOn
  /*  se this to wait for certn event on step target before going to the next step 
      like click on a button or hit enter on an input */
  nextOn?: string; // disable next btn on default template
  placement?: 'topLeft' | 'top' | 'topRight' | 'leftTop' | 'left' | 'leftBottom'
    | 'rightTop' | 'right'| 'rightBottom'| 'bottomLeft' | 'bottom'| 'bottomRight';
}

###Changes

Version 1.2.0

*Add allowInteractions option on tour step
-> Use this to allow click, type..etc on tour target
*Add allowInteractions nextOn on tour step
-> Use this to wait for certn event on step target before going to the next step 
like click on a button or hit enter on an input
You can’t perform that action at this time.