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