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.

The NgStarter Angular Guided Tour component lets you guide users through the real UI with ordered steps attached to existing elements. Use for first-run onboarding, feature discovery, setup guidance, new feature education, and complex screen walkthroughs where each step points at a real element through ngsTourAnchor, a selector, or an element callback. It includes examples for Basic Guided Tour, Backdrop Guided Tour, Wait For Guided Tour, and Close On Backdrop Click.

Basic Guided Tour

Basic tour steps attach to existing UI elements and move the user through a screen in order.

Step 1 Anchor

Step 2 Anchor

Step 3 Anchor

Dynamic Anchor (No Directive)

Backdrop Guided Tour

Use backdrop steps when the current element needs strong focus and the rest of the page should recede.

Level 1: Root Block

Container Level 2

Level 2: Nested Block

Selectable text

Relative Container (Scrolled down)

Level 3: Absolute Block

Wait For Guided Tour

Use waitFor when a step targets content that appears after rendering, data loading, or user interaction.

Static Element (Step 1)

Waiting for dynamic element...

Close On Backdrop Click

Allow backdrop click closing only when the tour is optional and users can safely leave it at any point.

Step 1

Step 2

HTML and Template Support

Use template content when a tour step needs richer Angular markup than a title and plain text.

I am a Template Target

Click the button to see HTML and TemplateRef support in action.

Custom Buttons

Customize button labels when the step wording should match the product flow or user action.

Step 1 Anchor

Step 2 Anchor

Step 3 Anchor

Global Configuration

Use provideTourConfig to set default labels, padding, backdrop behavior, and keyboard support for all tours.

Step 1 (Global Config)

Step 2 (Global Config)

Keyboard Navigation

Keyboard navigation lets users move through a tour with arrow keys and close it with Escape.

Step 1 Anchor

Step 2 Anchor

Step 3 Anchor

Positioning

Use explicit positioning when the automatic placement would cover important UI or feel visually disconnected.

above-start

above-center

above-end

before-start

after-start

before-center

after-center

before-end

after-end

below-start

below-center

below-end

Route Navigation

Route steps let one guided tour continue across pages while still pointing at real elements on each screen.

Step 1: Current Page

This example demonstrates how the tour can automatically navigate to a different route. The second step will navigate to the Button component page and wait for an element there.