angularangular-materialwalkthrough

How to do overlay onboarding, walkthrough, product guided tour in Angular

It's very hard to find something good looking related to guided tour, onboarding, etc. for Angular. Most of the libraries are ugly, abandoned, or built only for desktop-driven tours.

For mobile, there isn't any library to support it properly. Most users search for 'material design tour onboarding', as we can see it in Android libraries, but there aren't any really good libraries for web mobile tours, unfortunately.

Also, there are so many different names for searching of the solution you need. They named so differently, so it becomes a serious problem to search for them.

The best library for mobile guided tours I founded was MaterialTapTargetPrompt, but it is for Android, and there aren't any forks for Angular. It also could be called ShowCaseView, etc.

I want to set there existed libraries for guided tours, overlay onboarding, or walkthrough steps. What are some of the newest, better libraries for this, or will the Angular Material team implement its own library for this?

Solution

    1. ngx-guided-tour and tutorial on medium. Demo. With overlay. Hard to adapt to mobile

      ngx-guided-tour

    1. ngx-tour and its demo. No overlay, just tour. Looks good but also mostly for desktop. also called ngx-tour-ng-bootstrap - same lib.

      ngx-tour

    1. joyride tour demo, very similar to ngx-guided-tour. But works better with the mobile viewport (some questions on StackOverflow about joyride)

      joyride tour

    1. angular-ui-tour demo - ngx-tour was inspired by this lib so they also are similar. without overlay, desktop.

      angular-ui-tour

    1. ngx-onboarding (rosen-group/ngx-onboarding) demo - this lib looks better that all another there, but also cant be killer for material overlays like in android tapTargetPromt lib.

      enter image description here

    1. telemachy - abandoned (2y) lib with poor overlayed steps. similar to the above libs.

      telemachy

    1. miraxes/angular-custom-tour demo overlayed, steps. Similar.

      angular-custom-tour

    1. bdc-walkthrough demo - desktop driven, steps without overlay...

      bdc-walkthrough

    1. angular-onboarding-overlay demo - custom solution, not a lib, perhaps it's good, but hard adapt to mobile

      angular-onboarding-overlay

    1. ngx-walkthrough page - no demo, good screenshots, a fork of old lib, loads of forks from angular 5, 6, etc, errors on install. will see

      ngx-walkthrough

    Summary:

    I've not found any good lib there to make a simple and nice onboarding on mobile. all of these step-ish poppers and modals look like big annoying tooltips. Have no idea why till 2020 angular (and angular-material lib) have no good libraries for this case. I Will happy if somebody suggests another libs/ways solutions for this case.

    I hope, soon we will have something like android material onboarding like there.

    Good links to inspire:

    https://www.pinterest.com/Johnsenmc/app-overlay-examples/

    Pics

    Similar searching, but without success