Angular walkthroughs: libraries, working code, and build vs. buy.

import { Component, inject, OnInit } from "@angular/core";
import { ShepherdService } from "angular-shepherd";

@Component({ selector: "app-onboarding", template: "" })
export class OnboardingComponent implements OnInit {
  private shepherd = inject(ShepherdService);

  ngOnInit() {
    this.shepherd.defaultStepOptions = { scrollTo: true };
    this.shepherd.modal = true;
    this.shepherd.addSteps([
      {
        id: "create-project",
        text: "Everything starts here — create your first project.",
        attachTo: { element: ".new-project-btn", on: "bottom" },
        buttons: [{ text: "Next", type: "next" }],
      },
    ]);
    this.shepherd.start();
  }
}

// Template: anchor steps with the tourAnchor directive
//   <button tourAnchor="create.project" class="new-project-btn">New project</button>

import { Component, inject, OnInit } from "@angular/core";
import { TourService } from "ngx-ui-tour-md-menu";

@Component({ selector: "app-root", templateUrl: "./app.component.html" })
export class AppComponent implements OnInit {
  private tour = inject(TourService);

  ngOnInit() {
    this.tour.initialize([
      { anchorId: "create.project", content: "Everything starts here.", title: "Create a project" },
      { anchorId: "invite.team", content: "Invite a teammate early.", title: "Bring the team" },
    ]);
    this.tour.start();
  }
}

import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const tour = driver({
  showProgress: true,
  steps: [
    {
      element: ".new-project-btn",
      popover: { title: "Start here", description: "Create your first project." },
    },
    {
      element: ".invite-field",
      popover: { title: "Bring the team", description: "Invite a teammate early." },
    },
  ],
});

tour.drive(); // e.g. from ngOnInit

import introJs from "intro.js";
import "intro.js/introjs.css";

introJs()
  .setOptions({
    steps: [
      { element: document.querySelector(".new-project-btn"), intro: "Everything starts here." },
      { element: document.querySelector(".invite-field"), intro: "Invite a teammate early." },
    ],
  })
  .start();