Guided Tour

Guided Tour creates a step-by-step walkthrough on top of the real UI. Use it to teach users how a screen works, introduce a new feature, or guide them through a complex flow by attaching steps to existing elements with anchors or selectors.

Use Guided Tour when you need:

A first-run onboarding tour or feature discovery flow.
Steps attached to real interface elements through ngsTourAnchor, selectors, or an element callback.
Optional backdrop highlighting to focus attention on the current element.
Navigation between steps, keyboard control, route changes, or waiting for dynamic elements.
Custom step content with plain text, HTML, or an Angular template.

Do not use Guided Tour for a simple hover hint, anchored menu, confirmation dialog, form wizard, documentation page, or marketing onboarding screen. Use Tooltip, Popover, Confirm, Dialog, Stepper, or normal page content for those cases.

Guided Tour API

TourAnchorDirective

Directive used to mark elements as tour anchors.

Input	Type	Description
`ngsTourAnchor`	`string`	Unique identifier for the tour step anchor.

TourService

Service to control the guided tour.

Method	Description
`start(steps: TourStepConfig[])`	Starts the tour with the provided step configurations.
`end()`	Ends the current tour.
`next()`	Goes to the next step.
`prev()`	Goes to the previous step.
`goToStep(index: number)`	Goes to a specific step by index.

TourStepConfig

Configuration object for a tour step.

Property	Type	Description
`anchorId`	`string \| (() => HTMLElement \| string)`	Unique identifier for the anchor or a function returning the element.
`title`	`string`	Title of the tour step.
`content`	`string`	Text content of the tour step.
`htmlContent`	`string`	HTML content for the tour step (sanitized).
`withBackdrop`	`boolean`	Whether to show a backdrop and highlight the element.
`route`	`string`	Route to navigate to before showing the step.
`position`	`TourStepPosition`	Explicit position for the tour step.

Using this component in production?

Source code, templates, and commercial support

NgStarter includes source code, admin dashboard templates, and commercial support.