@glowhop/angular-tour

ESM-only Angular 18 adapter with DI-scoped signals for native reactive state. Content is Angular template content. See the Core guide for workflow options and actions.

Compatibility: Angular 18+ (^18.0.0). SSR: verified with Angular SSR (@angular/ssr) and provideClientHydration() in a production Angular 18 app. Full contract: compatibility.

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

@Component({
  standalone: true,
  imports: [GlowTourDefault],
  template: '<button id="welcome">Welcome</button><button type="button" (click)="start()">Start tour</button><glow-tour-default [tour]="tour" />',
})
export class Onboarding {
  readonly tour = createGlowTour();
  readonly workflow = this.tour.create("intro").step({ id: "welcome", target: "#welcome", title: "Welcome", content: "Hello." }).build();
  start() { void this.tour.start(this.workflow); }
}

import { Component } from "@angular/core";
import { GlowTourRoot, GlowTourOverlay, GlowTourPopover, GlowTourHeader, GlowTourContent, GlowTourFooter, GlowTourAdvanceTrigger, createGlowTour } from "@glowhop/angular-tour";
@Component({ standalone: true, imports: [GlowTourRoot, GlowTourOverlay, GlowTourPopover, GlowTourHeader, GlowTourContent, GlowTourFooter, GlowTourAdvanceTrigger], template: '<button id="welcome" type="button" (click)="start()">Start</button><glow-tour-root [tour]="tour"><glow-tour-overlay /><glow-tour-popover><glow-tour-header /><glow-tour-content /><glow-tour-footer><glow-tour-advance-trigger /></glow-tour-footer></glow-tour-popover></glow-tour-root>' })
export class CustomTour { readonly tour = createGlowTour(); readonly workflow = this.tour.create("custom").step({ id: "welcome", target: "#welcome", title: "Welcome", content: "Hello." }).build(); start() { void this.tour.start(this.workflow); } }

Use GlowTourRoot, GlowTourOverlay, GlowTourPointer, GlowTourPopover, GlowTourHeader, GlowTourContent, GlowTourFooter, and named triggers for composition. injectGlowTour() runs a tour from a component and returns its state as signals; injectGlowTourContext() reads that state inside glow-tour-root. Static/dynamic targets, placement, interaction, scroll, callbacks, actions/events, cancellation, and cleanup follow Core.