Press "Enter" to skip to content

Angular Directive To Build Web App Tours Library | ngx-joyride

Angular Tour (Joyride) library is built entirely in Angular, without using any heavy external dependencies like Bootstrap or JQuery. From now on, you can easily guide users through your site and show them all the sections and features.

bootstrap guided tour, ngx guided tour example, website guided tour plugin, ngx ui tour core, javascript guided tour library, website tour examples, javascript product tour libraries

A Plugin for Bootstrap 5 That Allows Building Intro Tours

How to make use of it:

Install:

npm install ngx-joyride --save
or
yarn add ngx-joyride

1. Mark your HTML elements with the joyrideStep directive.

<h1 joyrideStep="firstStep" title="Page Title" text="Main title!">Text</h1>
<div joyrideStep="secondStep" title="Page Title" text="Main title!">Div content</div>

2. Import the JoyrideModule in your AppModule.

@NgModule({
    declarations: [AppComponent],
    imports: [JoyrideModule.forRoot(), RouterModule.forRoot([]), BrowserModule],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

3. Inject the JoyrideService in your Component and start the Tour, passing the steps order list.

@Component({
    selector: 'app-component',
    templateUrl: './app.component.html',
})
export class AppComponent {
    constructor(private readonly joyrideService: JoyrideService) {}

    onClick() {
        this.joyrideService.startTour(
            { steps: ['firstStep', 'secondStep'] } // Your steps order
        );
    }
}

Directive To Build Web App Tours, Angular Joyride Plugin/Github


See Demo And Download

Official Website(tnicola): Click Here

This superior jQuery/javascript plugin is developed by tnicola. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *