README
ng-tour
A simple, minimalistic tour/on-boarding library for Angular (2+).
Support: Angular 2, 4, 5, 6, 7, 8, 9, 10
Installation
npm install --save @p1n2o/ng-tour
Usage
- Import the AngularTourModule & RouterModule in your AppModule:
import { AngularTourModule } from "@p1n2o/ng-tour";
import { RouterModule } from "@angular/router";
@NgModule({
declarations: [AppComponent],
imports: [
AngularTourModule.forRoot(),
RouterModule.forRoot([]),
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
- Import the AngularTourModule in your Feature Modules:
@NgModule({
declarations: [FeatureComponent],
imports: [
AngularTourModule.forChild()
],
providers: [],
})
export class FeatureModule { }
- Use ngTourInit directive inside app.component.html. A good choice is marking
<router-outlet>with it.
<route-outlet ngTourInit></route-outlet>
- Mark your target HTML elements with the ngTour directive with a unique name.
<div ngTour="sampleElem1">...</div>
<span ngTour="sampleElem2">...</span>
- Inject NgTourService in your Component (where Tour is being started).
import {TourService, Tour, StepOptions, TourEvents} from 'ng-tour';
@Component({
selector: 'component-of-your-choice',
templateUrl: './your.component.html'
})
export class ComponentOfYourChoice {
constructor(private readonly tourService: TourService) { }
}
- Create a configuration object and pass it as an argument to the startTour method
const tour: Tour = {
steps: [
{
stepName: "sampleElem1",
route: "first-route",
title: 'My first lazily loaded title',
description: "My first feature description",
},
{
stepName: "sampleElem2",
route: "second-route",
title: "My second lazily loaded title",
description: "My second feature description",
options:{placement: 'top', smoothScroll: true}
}
],
tourOptions: {
backdrop: true,
placement: 'bottom',
}
}
Keep in mind if you implement your own Step template, you can use your own Step properties besides required ('stepName' and 'route')
ngOnInit() {
this.tourService.startTour(this.tour);
}
or
startTour() {
this.tourService.startTour(this.tour);
}
Customization
If you want to use tour own Step template wrap it with <ng-tour-template> and place in app.component.html. Mark the provided template with reference with assigned value 'step