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
);
}
}API reference
Directive Inputs/Outputs
You can use the joyrideStep a directive with these inputs:
| @Input | Required | Purpose | Values/Type |
|---|---|---|---|
| joyrideStep | Yes | The step name should be unique. | string |
| stepPosition | No | The position in which the step will be drawn. | ‘top’, ‘right’, ‘bottom’, ‘left’, ‘center’ |
| title | No | The step title. | string |
| text | No | The step text content. | string |
| stepContent | No | An Angular template with custom content. | TemplateRef<any> |
| stepContentParams | No | Data object to pass in with Angular template | Object |
| prevTemplate | No | An Angular template with a custom prev button. | TemplateRef<any> |
| nextTemplate | No | An Angular template with a custom next button. | TemplateRef<any> |
| doneTemplate | No | An Angular template with a custom-done button. | TemplateRef<any> |
| counterTemplate | No | An Angular template with a custom counter component. | TemplateRef<any> |
| @Output | Required | Purpose |
|---|---|---|
| next | No | It fires an event when ‘Next’ button is clicked. |
| prev | No | It fires an event when ‘Prev’ button is clicked. |
| done | No | It fires an event when ‘Done’ button or ‘Close’ are clicked and the Tour is finished. |
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.
