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

• module
• component

Developer commands reference

npx nx run tools:help --search client-guided-tour:

References

• Nx
• Angular
• Angular Material