How to Use UI-tour in Angular 6

Question

Anyone have an idea which is the library to use UI-tour or walkthrough in angular application. I don't find any valid library except ng-walkthrough. My need is the one where we can have more flexibility and supportability with the library.

I have tried with ngx-bootstrap-product-tour but it did not work for me. whenever I click on it to start the tour, it's not reflecting anything, I don't see any error or any other problem.

If any suggestions, please let us know.

Answer 1

use bootstrap tour library. here is a bootstrap tour for angular - https://www.npmjs.com/package/ngx-bootstrap-product-tour

demo & docs - https://nmilicic.github.io/ngx-bootstrap-product-tour/

Answer 2

https://stackblitz.com/edit/angular-onboarding-overlay

The above link worked for me - the same purpose that you are looking for. The above example uses Angular Material CDK and Overlay to achieve this.

Please find more useful links below that can even support for Angular 6.

• https://www.npmjs.com/package/ngx-joyride (Pretty Straight Forward)
• https://isaacplmann.github.io/ngx-tour/
• (https://introjs.com/) . https://www.freakyjolly.com/angular-7-6-adding-walk-through-introduction-tour-plugin-for-step-by-step-tutorial-in-angular-2-applications/