Angular

GlowTour.js for Angular

Standalone Angular 18 components with a DI-scoped root, distributed in Angular Package Format with partial compilation. Drop GlowTourDefault into any standalone component template.

Read the Angular guide Getting started

Install

npm i @glowhop/angular-tour @glowhop/styles-tour

26.1 KiB gzipped in total: 3.6 KiB of adapter over the shared 21.2 KiB engine, plus 1.4 KiB of theme CSS you can replace with your own.

@glowhop/angular-tour on npm · @glowhop/styles-tour on npm

Quick start

From examples/angular in the GlowTour.js repository - copy, paste, run.

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

@Component({
  standalone: true,
  imports: [GlowTourDefault],
  selector: "app-root",
  template: `
    <div style="padding: 20px">
      <h1>GlowTour.js - Angular Example</h1>
      <button
        id="welcome"
        type="button"
        (click)="start()"
        style="padding: 10px 20px; font-size: 16px"
      >
        Start tour
      </button>
    </div>
    <glow-tour-default [tour]="tour" />
  `,
})
export class AppComponent {
  readonly tour = createGlowTour();
  readonly workflow = this.tour
    .create("welcome")
    .step({ id: "welcome-4", target: "#welcome", title: "Welcome", content: "Hello world!" })
    .build();

  start() {
    void this.tour.run(this.workflow);
  }
}