Angular product tour & onboarding library

import { Component } from "@angular/core";
import "@glowhop/styles-tour/default.css";
import { GlowTourDefault, injectGlowTour } from "@glowhop/angular-tour";

@Component({
  standalone: true,
  imports: [GlowTourDefault],
  template: `
    <main>
      <section data-tour="features">
        <h2>Features</h2>
        <p>We offer guided tours, SSR support, and full keyboard navigation.</p>
      </section>
      <section data-tour="pricing">
        <h2>Pricing</h2>
        <p>Open source and free.</p>
      </section>
      @if (glow.status() === "active") {
        <p>
          Step {{ glow.currentStepIndex() + 1 }} of {{ glow.totalSteps() }}
          <button (click)="glow.cancel()">Stop</button>
        </p>
      } @else {
        <button (click)="startTour()">Start tour</button>
      }
    </main>
    <glow-tour-default [tour]="glow.tour" />
  `,
})
export class TourComponent {
  readonly glow = injectGlowTour();

  private readonly workflow = this.glow
    .create("product-tour")
    .step({
      id: "features",
      target: '[data-tour="features"]',
      title: "Explore features",
      content: "Learn about all the capabilities.",
    })
    .step({
      id: "pricing",
      target: '[data-tour="pricing"]',
      title: "Check pricing",
      content: "See plans that fit your needs.",
    })
    .build();

  startTour() {
    void this.glow.start(this.workflow);
  }
}