Guided Tour

Basic Guided Tour

Step 1 Anchor

Step 2 Anchor

Step 3 Anchor

Dynamic Anchor (No Directive)

Backdrop Guided Tour

Example demonstrating backdrop with elements at different nesting levels.

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

Example demonstrating waiting for an element that appears dynamically.

Static Element (Step 1)

Waiting for dynamic element...

Close On Backdrop Click

Example demonstrating closing the tour when clicking on the backdrop.

Step 1

Step 2

HTML and Template Support

Example demonstrating support for HTML strings and TemplateRef in step content.

I am a Template Target

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

Custom Buttons

Example demonstrating customization of button labels.

Step 1 Anchor

Step 2 Anchor

Step 3 Anchor

Global Configuration

Example demonstrating global configuration using provideTourConfig.

Step 1 (Global Config)

Step 2 (Global Config)

Keyboard Navigation

Example demonstrating keyboard navigation using arrows and Escape key.

Step 1 Anchor

Step 2 Anchor

Step 3 Anchor

Positioning

Example demonstrating all 12 explicit positioning options for tour steps (above, below, before, after).

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

Example demonstrating automatic navigation between routes during the tour.

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.