5

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?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Igor Kurkov
  • 4,318
  • 2
  • 30
  • 31

2 Answers2

27

  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

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Igor Kurkov
  • 4,318
  • 2
  • 30
  • 31
1

Check out Ghost Rider!

Some of the other libraries are not maintained and kept up to date with later versions of Angular and have extra dependencies while this one doesn't!

https://www.npmjs.com/package/ng-ghost-rider

Freddy
  • 11
  • 3