Angular 13 Material Website UI Tour With Popup Dialog Using ngx-ui-tour-core in TypeScript

 

 

Ngx UI Tour

UI tour library for Angular 9+

Angular Material, 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.


npm npm npm

Table of contents

Demo and documentation

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

Compatibility

Angular and RxJS versions

Since libraries built with Angular Ivy partial compilation mode can only be used with Angular v12 or higher, ngx-ui-tour v8 no longer supports older Angular versions.

Angular RxJS ngx-ui-tour
12-13 6, 7 8
9-12 6 7

Installation

 

 

 

 

Usage

Simple project

  1. Add <tour-step-template></tour-step-template> to your root app component
  2. Define anchor points for the tour steps by adding the tourAnchor directive throughout your app.

 

 

 

 

 

 

  1. Start the tour with tourService.start()
  2. Check out the demo source code for an example.

Lazy loaded modules

  1. Add <tour-step-template></tour-step-template> to your root app component.
  2. Import TourMatMenuModule.forRoot() into your app module.
  3. Import TourMatMenuModule into all lazy loaded modules needing the tour.
  4. Import the TourService in your highest level eagerly loaded component and initialize all your steps there (even the ones in the lazy loaded modules). Note: Make sure every step object contains its route. For example, if the route to a step is ‘/home’ then your step object should have route: ‘/home’ as a member.
  5. Define anchor points for your steps by adding the tourAnchor directive throughout your modules (any component that requires it at any level).

 

 

TourService

The TourService controls the tour. Some key functions include:

start()
Starts the tour

startAt(stepId: number | string)
Start the tour at the step with stepId or at the specified index

end()
Ends the tour

pause()
Pauses the tour

resume()
Resumes the tour

next()
Goes to the next step

prev()
Goes to the previous step

Step Configuration

Each step can have the following properties.

Name Type Default Description
stepId string “” A unique identifier for the step
anchorId string required The anchor to which the step will be attached
title string “” The title of the tour step
content string “” The content text of the tour step
enableBackdrop boolean false Controls whether to enable active element highlighting
route string | UrlSegment[] undefined The route to which the tour should navigate before attempting to show this tour step. If undefined, no navigation is attempted.
closeOnOutsideClick boolean false Enable to close the tour on outside click (“md-menu” UI only)
disablePageScrolling boolean false Prevents user from being able to scroll the page when the UI tour is active (“md-menu” UI only)
nextStep number | string undefined The step index or stepId of the next step. If undefined, the next step in the steps array is used.
prevStep number | string undefined The step index or stepId of the previous step. If undefined, the previous step in the steps array is used.
placement MdMenuPlacement undefined Tour step position with respect to the anchor.
disableScrollToAnchor boolean false Tour steps automatically scroll to the middle of the screen, if they are off the screen when shown. Setting this value to true will disable the scroll behavior.
prevBtnTitle string “Prev” Sets a custom prev button title for a given step. Default is “Prev”
nextBtnTitle string “Next” Sets a custom next button title for a given step. Default is “Next”
endBtnTitle string “End” Sets a custom end button title for a given step. Default is “End”
isAsync boolean false Mark your step as “async” if anchor element is added to DOM with a delay (ie after data is loaded).
isOptional boolean false Mark your step as “optional” if it should be skipped when anchor element is not found. Step can not be marked both “optional” and “async”.
delayAfterNavigation number 0 Delay between navigation to a different route and showing the tour step in ms. Might be needed if you use custom scrollbar and the page is not scrolled all the way before the tour step is shown.

 

Leave a Reply