UI tour library for Angular

Angular Material, Ionic, PrimeNG, Taiga UI, Ng Bootstrap and Ngx Bootstrap UIs are supported.

ngx-ui-tour is a fork of Isaac Mann's ngx-tour. The project had to be forked since the original is no longer maintained.

Table of contents

• Demo and documentation
• Compatibility
• Installation and Usage
• FAQ
• TourService
• Step Configuration
• Defaults
• Hotkeys
• Event Observables
• Custom template
• Styling Active Tour Anchor
• Targeting Third Party Elements
• License

Demo and documentation

Demo and documentation can be found at hakimio.github.io/ngx-ui-tour

Compatibility

Material Design and Ngx Bootstrap tour UIs

NG Bootstrap tour UI

Ionic tour UI

PrimeNG tour UI

Taiga UI tour UI

Installation and Usage

• Material Design UI
• Ionic UI
• NG Bootstrap UI
• Ngx Bootstrap UI
• Taiga UI Dropdown UI
• Taiga UI Hint UI
• JavaScript Console UI

FAQ

Documentation page

Step Configuration

Documentation page

Defaults

Documentation page

TourService

Documentation page

Event Observables

Documentation page

Hotkeys

Documentation page

Custom template

Documentation page

Styling Active Tour Anchor

Documentation page

Targeting third party elements

Documentation page

License

MIT

6.0.1 (2025-01-02)

Fixes

• Fix some of the step options not getting applied correctly after switching to "OnPush" change detection strategy

6.0.0 (2024-12-30)

Features

• Support for Angular 19

Breaking Changes

• Angular 18 is no longer supported

5.0.0 (2024-07-25)

Features

• New trapFocus option. Disabled by default to allow focusing input elements.

Breaking Changes

• Ionic 7 is no longer supported. v8.2.6 is the minimum supported Ionic version.

4.0.0 (2024-06-26)

Features

• Support for Angular 18
• New tour-proxy-anchor component. It can be used to target third party html elements.

Breaking Changes

• Angular 17 is no longer supported

3.1.0 (2024-06-06)

Features

• Auto-detect anchor element's scroll container to fix smooth scroll issues.

Fixes

• Fix "showArrow" option not respected when set using "tourService.setDefaults()".

3.0.3 (2024-05-02)

Fixes

• Fix issue preventing the tour from closing when used in "NgModule" application.
• Allow @ionic/angular ^8.1.0 as peer dependency

3.0.2 (2024-01-26)

Fixes

• Fix issue preventing the tour from starting when it was closed after navigating back, while the first step is optional and not available.

3.0.1 (2023-12-05)

Fixes

• Fix "Next" button position when progress display is disabled.

3.0.0 (2023-11-30)

Features

• Support for Angular 17.
• New asyncStepTimeout config. It's now possible to have optional async steps if asyncStepTimeout is specified.
• Ionic standalone components are now used instead of Ionic module.
• Default step template now contains tour progress indicator. Can be disabled using showProgress config.

Breaking Changes

• Angular 16 is no longer supported.
• Due to migration to Ionic standalone components, @ionic/angular version requirement has been set to ^7.5.6.

2.0.6 (2023-10-25)

Fixes

• Fix merging deeply nested tour options like backdrop config or step dimensions

2.0.5 (2023-10-17)

Fixes

• Fix backdrop and scroll position when anchor element's height exceeds its scroll container's height

2.0.4 (2023-09-18)

Fixes

• Fix issue with SSR compatibility.

2.0.3 (2023-07-13)

Fixes

• Fix backdrop position when anchor element is on the edge of the screen and backdrop offset is greater than zero.

2.0.2 (2023-06-23)

Fixes

• Re-initializing the tour is no longer allowed while it's active.

2.0.1 (2023-06-22)

Fixes

• Fix TypeScript build errors when strict mode is enabled.

2.0.0 (2023-06-21)

Features

• Support for Angular 16
• "Disable page scrolling" feature now uses scrollContainer config to determine affected container. Before scrollContainer was only used by "smooth scrolling" feature.
• New popoverClass config

Fixes

• Fix smooth scroll in Ionic apps using tabs based layout

Breaking Changes

• Angular 15 is no longer supported
• overflow: hidden is now used instead of position: fixed to disable page scrolling.
• centerAnchorOnScroll, disablePageScrolling and smoothScroll options are now enabled by default.

1.7.0 (2023-04-24)

Features

• Support for Ionic v7

1.6.0 (2023-03-28)

Features

• New showArrow config. Can be used to hide arrow in ios mode.
• New tourService.setDefaults() method which can be used to set defaults without specifying tour steps.

1.5.1 (2023-03-14)

Fixes

• Fix default step max-width.

1.5.0 (2023-03-13)

Features

• New allowUserInitiatedNavigation config. Enable to keep the tour open while the user navigates to a different page. Can cause the tour to get "stuck" if active anchor element is removed from the DOM after the navigation. The option is not related to navigation initiated by the UI tour and should not be enabled in most cases.
• New stepDimensions config. Use it to customize tour step width, min-width and max-width. Accepts "width" CSS property values, ie "250px" or "auto".

1.4.0 (2023-02-14)

Features

• Check not only if element is in viewport but also if it's not covered by another element when deciding whether to scroll the anchor element into view.

Fixes

• Backdrop should be hidden on tour pause.
• Fix smooth scroll in Ionic apps which don't use Angular router.

1.3.1 (2023-02-09)

Fixes

• Fix smoothScroll usage in multi-route UI tours

1.3.0 (2023-02-08)

Features

• New scrollContainer config. Can be set to CSS selector or html element reference. Only set this config if you have enabled smoothScroll and tour step description pops-up before scrolling has finished or doesn't show up at all. This should only be the case when scroll container is part of shadow DOM.

Fixes

• Fix tour popover not showing-up when smoothScroll is enabled and the page is scrolled to reveal active tour anchor

1.2.0 (2023-02-06)

Features

• New backdropConfig.parentContainer config. Can be set to CSS selector or html element reference. Set it to fix backdrop stacking issues. Defaults to body.

Fixes

• Fix backdrop on top of tour step.
• Fix incorrect step position after navigation.
• Fix step width in "ios" mode.
• Use injected document reference everywhere for SSR safety.

1.1.0 (2023-01-26)

Features

• New centerAnchorOnScroll config. Enable to keep active anchor element centered when possible. "Safari" currently does not support this feature.
• New smoothScroll config. Activate to use smooth scroll when scrolling to tour anchor element. Animations have to be enabled on OS level for it to work. Controlled by "Animate controls and elements inside windows" setting on Windows OS.
• New disablePageScrolling config. The config only disables "page-level" scroll and will not disable scroll on any deeply nested containers. Implementation is based on Angular CDK "BlockScrollStrategy".

Fixes

• UI Tour now automatically ends on any navigation which was not started by the tour itself. Before only browser's back and forward navigation would cause the tour to end.

1.0.0 (2023-01-10)

Features

• Initial release!