1.0.12 • Published 5 days ago
@rfprodz/client-guided-tour v1.0.12
Guided Tour Module for Angular
This library was generated with Nx.
Description
Guided tour feature for Angular clients.
Usage
Within the development workspace
Import the module
...
import { AppGuidedTourModule } from '@app/client-guided-tour';
@NgModule({
imports: [
...
AppGuidedTourModule,
...
],
...
})
export class AppModule {}
As an external package
Install the package
yarn add @rfprodz/client-guided-tour @angular/cdk @angular/common @angular/core @angular/material @angular/router
Import the module
...
import { AppGuidedTourModule } from '@rfprodz/client-guided-tour';
@NgModule({
imports: [
...
AppGuidedTourModule,
...
],
...
})
export class AppModule {}
Use in components
...
<p>... Some content ...</p>
<div [appGuidedTour]="config.at(0)" [highlightElement]="false">first item to explain</div>
<p>... Some content ...</p>
<div [appGuidedTour]="config.at(1)" [highlightElement]="true">second item to explain</div>
...
@Component({
...
providers: [AppGuidedTourService], // <-- declare a service
...
})
export class GuidedComponent implements AfterViewInit {
/** Locate steps. */
@ViewChildren(AppGuidedTourDirective) public steps!: QueryList<AppGuidedTourDirective>;
/** Configure the tour. */
public tourConig$ = signal<IGuidedTourData[]>([
{
index: 0,
title: 'first',
subtitle: 'First step',
description: 'The first step. Highlighting disabled.',
first: true,
last: false,
},
{
index: 1,
title: 'second',
subtitle: 'Second step',
description: 'The second step. Highlighting enabled.',
first: false,
last: true,
},
]);
constructor(public readonly tour: AppGuidedTourService) {}
public ngAfterViewInit(): void {
this.tour.configuration = this.steps; // <-- add steps to the service
}
}
Full example
Developer commands reference
npx nx run tools:help --search client-guided-tour: