product tour angular

Existing customer? Sign in

6 Best Angular Product Tour Libraries For User Onboarding

If you want to build onboarding tours for Angular applications, here are six open-source libraries you should check out. And if you want to try a no-code solution to save time and resources, we’ve got you covered, too.

If you’re using Angular to develop your web applications, you’re already familiar with its robust features and ease of use. Developed and maintained by Google, Angular is known for its ability to create Single Page Applications (SPAs), which helps you offer a seamless user experience and faster loading times.

Additionally, Angular has a large and active community of developers, which means that there is a wealth of resources and support available to you. This community-driven support also ensures that Angular is continuously updated with new features and security patches, making it a reliable and secure framework for building web apps.

And if you’re looking to build product tours on Angular, you’re in luck. It offers a wide range of tools and features that make it easier to build user onboarding tours. For example, you can use Angular's built-in support for animations and dynamic components to create engaging and interactive tours that guide users through your key features.

The best place to start with building your own Angular product tours is to find an open-source library that gives you all the tools you need to get started. 

Can't code? No time? Try our no-code tool instead.

Quickly create sophisticated onboarding flows, all without any code involved.

6 Best Angular onboarding tour libraries #

An open-source library simplifies building from scratch and saves you precious time. So if you want to build onboarding tours for Angular applications, here are six open-source libraries you should check out for building your Angular product tour.

We’ve picked them out based on their ease of use as well as their reliability and how they are being looked after by the team that made them. For instance, we’ve omitted libraries that are not being maintained anymore. 

1. Angular Intro.js  #

Good old Intro.js. We’ve talked about it in our previous articles on JavaScript tours , React tours , and Vue.js tours . Of course, Intro.js also works with Angular. 

Intro.js is a well-known library for creating step-by-step introductions and guided tours on web applications. There are other features such as various customization options, controlling the order of the steps, as well as tooltips and highlighting elements. 

It is used by major companies like Amazon and SAP, so it is quite reliable and trusted. Unlike various other open-source libraries, Intro.js has a commercial license that starts at a one-time purchase of $9.99. 

If you decide to get Intro.js, make sure to get the Angular wrapper , which allows Intro.js to work inside an Angular app. 

2. Angular Shepherd #

Shepherd is another onboarding library that pretty much works for all JavaScript-based frameworks. Angular as well.

Like Intro.js, Shepherd allows you to define a sequence of steps that guide users through your application's interface, highlighting key elements and providing descriptive tooltips. The library provides a flexible API for customizing the behavior, appearance, and position of each step, as well as the ability to add event handlers for user interactions.

Shepherd provides a wrapper for Angular so you can get started with it on your Angular product right away. 

To use Angular Shepherd, you need to install and import the angular-shepherd package in your Angular application. You can then define the steps of the tour using the ShepherdService, and customize each step's content, position, and styling using HTML and CSS.

3. Angular UI Tour  #

Angular UI Tour is a plugin that uses popovers from Angular UI Bootstrap to display a guided tour. It was originally created as Angular Bootstrap Tour , inspired by Bootstrap Tour , but then they tweaked it so that it doesn’t have any dependency on Twitter Bootstrap or JQuery. 

Angular UI Tour gives you the ability to create tours with multiple steps that can be customized with HTML and CSS. Each step can include a title, a description, and a template with custom content. You can also highlight elements on the page and add tooltips or popovers to provide additional information.

Angular UI Tour also supports multiple positioning options, such as left, right, top, and bottom, and allows you to control the size and position of the highlighted elements. Additionally, you can add event handlers to respond to user interactions, such as clicking or hovering on an element.

To use Angular UI Tour, you need to install and import the angular-ui-tour package and add the ui-tour directive to your Angular app. You can then define the steps of the tour using a configuration object and start the tour by calling the start() method. 

4. Ngx UI Tour #

Inspired by Angular UI Tour, Ngx UI Tour is a product tour library that uses Angular Material MatMenu to display tours. So before you use this, you’ll have to make sure Angular Material is installed properly. Originally, this was Ngx Tour , but that library is not being maintained and it has been replaced by Ngx UI Tour. 

It allows you to create customizable steps that guide users through your application's interface and provides various features such as tooltips, popovers, and highlight elements.

With Ngx Tour, you can define each step of the tour using an HTML template, add event handlers to respond to user interactions, and customize the content, placement, and styling of tooltips and popovers. Ngx Tour also supports multiple positioning options, such as top, bottom, left, and right, and provides flexibility to adjust the step's size and position.

It’s also super well-maintained. Since 2021, it has had releases with new features and fixes like clockwork, right up to 2023. Considering that Angular UI Tour’s last release was in 2017, this might be a better option. 

To use Ngx Tour, you need to install and import the ngx-tour-core package and the specific ngx-tour-ngx-bootstrap or ngx-tour-md-menu package for the styling library of your choice. You can then add tour steps to your Angular app using the TourService and TourStep classes, and customize their appearance and behavior using CSS.

5. Angular Popper #

Angular Popper is a library that simplifies creating onboarding tours in Angular applications. It is built on top of Popper.js , which is a lightweight tooltip and popover library itself. 

As such, its focus is on creating tooltips. You can position them, arrange them in order, point them to certain elements. If all you need are great tooltips to give in-app guidance, Angular Popper may be the best fit for you. 

To use it, you need to install and import the NgxPopperModule and use the ngx-popper directive with a configuration object to create tooltips. You can define the content of each step using Angular components, choose from various placement options, and customize the styling of the popovers using CSS. 

6. Angular Joyride #

Angular Joyride is a product tour library built entirely in Angular with no external dependencies. As with other Angular-based libraries, you can take advantage of the various UI components offered by Angular when creating your tours.  

Aside from the usual ability to create tour steps and style them, you can use custom HTML content, pass parameters to your templates, set up multi pages navigation, and do everything you need to easily guide users through your site. 

It’s also fairly well maintained. New releases are not as frequent as NgX UI Tour, but the last release was in January 2022. Still fairly recent when compared to some other libraries on this list. 

To use Angular Joyride, install and import the ngx-joyride package and add the joyride directive to your Angular app. You can then define the steps of the tour using a configuration object and start the tour by calling the startTour() method. 

Don’t have the time or resources to build? Use a no-code onboarding software instead  #

Open-source libraries are great when you are looking to make user onboarding a DIY project for your in-house team. 

But if you think about the opportunity cost, knowing that building takes time and resources away from other mission-critical tasks you should be doing, consider using a product adoption platform as a no-code solution for onboarding.

In this case, Chameleon could be the right fit for your needs. You can use it to create customizable, on-brand Tours, Tooltips, Microsurveys, and Launchers. Try it for free and get into the sandbox environment to play with it, or book a personalized demo with our product experts.  

👉 Check out this interactive demo on building an onboarding Launcher in Chameleon.

Build onboarding for your Angular app fast & easy

Save dev time and quickly deploy product tours for your Angular app with our no-code suite of tools

You might also be interested in...

User Onboarding Metrics, KPIs, and Benchmarks: A Comprehensive Guide

User onboarding still isn't good enough, but here's how it's changing, mobile user onboarding: the ultimate guide for 2023, boost product adoption and reduce churn.

Get started free in our sandbox or book a personalized call with our product experts

Angular UI Tour

Product tour using angular ui bootstrap tooltips.

Guide your users through a tour of your app.

Accessibility.

Shepherd has full keyboard navigation support, focus trapping, and a11y compliance via aria attributes.

Highly Customizable

Shepherd's styles are kept minimal, allowing you to easily customize the look and feel, but still give you enough to drop in and be ready to go quickly.

Framework Ready

Shepherd is ready to drop into your application using React, Ember, Angular, Vue.js, ES Modules, or plain Javascript!

01. How to Include

02. example, brands that use shepherd.

ngx-guided-tour

• 1 Dependency
• 0 Dependents
• 15 Versions

Guided tour component using SASS and typescript. Allows you to use selectors to step your user through workflows and introduce them to your application. Customiziable theme and many features. Heavily inspired by react-joyride

See a quick demo - https://lsqlabs.github.io/ngx-guided-tour/

Installation

Install npm module:

npm install ngx-guided-tour --save

Add modules to app.module.ts

Add ngx-guided-tour to your app.component.html .

Add guided-tour-base-theme.scss to your main style import page. If you want to create your own theme add it after your defined constants.

Define your tour using the GuidedTour type:

Orientation configuration:

Then use the GuidedTourService to to start your tour by calling GuidedTourService.startTour .

If a selector is not found, the step will be skipped.

TourStep Interface

selector (optional) - If no selector is present then the tour will show a step in the middle of the page. If a selector is set but not found, it will skip the step.

title (optional) - Title that shows on the top of the step.

content - Content of the tourstep. Uses inner html so tags will work.

orientation (optional) - Defaults to top. Accepts bottom, bottomLeft, bottomRight, center, left, right, top, topLeft, and topRight. Can be taken from the guided-tour.constants.ts file. This also supports a array of OrientationConfiguration. When an array of OrientationConfiguration is passed to it, it will use the smallest maximumSize the screen can fit into. This is useful for tablet or mobile flexing. It will also change when the user resizes the screen.

action (optional) - Function called at the beginning of step. This is executed before the tour step is rendered allowing for content to appear.

closeAction (optional) - Function called after step is ended.

scrollAdjustment (optional) - Number used to adjust where to scroll to on a step and when to scroll.

useHighlightPadding (optional) - Adds some extra padding around the highlight for elements that may need just a little more on the highlight.

GuidedTour Interface

tourId - unique Identifer string

useOrb (optional) - Use orb to start tour. The tour will start when the user hovers over the orb. The orb is based on the positioning of the first step.

steps - List of TourSteps that the tour steps through.

skipCallback (optional) - Function called when the tour is skipped. Passes the index of the step that was skipped on.

completeCallback (optional) - Function is called when the tour is completed (done is pressed).

minimumScreenSize (optional) - Will enforce a minimum size before the tour will start (in pixels). If the window is resized below this size during a tour a message will inform the user to expand their browser.

preventBackdropFromAdvancing (optional) - Prevents the tour from advancing by clicking the backdrop. This should only be set if you are completely sure your tour is displaying correctly on all screen sizes otherwise a user can get stuck.

ngx-guided-tour component inputs

topOfPageAdjustment (optional) - Used to adjust values to determine scroll. This is a blanket value to adjust for things like nav bars.

tourStepWidth (optional) - Sets the width of tour steps.

minimalTourStepWidth (optional) - The minimal width of tour steps.

skipText (optional) - The text of the skip button.

nextText (optional) - The text of the next button.

doneText (optional) - The text of the done button (button on the last step).

closeText (optional) - The text of the close button (shown on the resize popup).

backText (optional) - The text of the back button.

progressIndicatorLocation (optional) - The location of the progress indicator (e.g. "1/5"). It can be placed inside the next button (default), at the top of the tour block or hidden. If set to ProgressIndicatorLocation.TopOfTourBlock the indicator will be shown on all steps. If it's shown inside the next button, it will be hidden on the last step.

progressIndicator (optional) - A ng-template to customize the progress indicator (e.g. "1/5"). The following context is provided: - currentStepNumber: The number of the current step (starting with 1) - totalSteps: The total number of steps

Style variables

These SASS variables have default values, but they can be set to customize the tour elements. Define them before importing guided-tour-base-theme.scss .

$tour-skip-link-color : Skip button color.

$tour-text-color : Color of the text that is in the tour step box.

$tour-next-text-color : Next button text color.

$tour-zindex : Base z-index for the tour.

$tour-orb-color : Color of the orb to start a tour.

$tour-next-button-color : Next button color.

$tour-next-button-hover : Next button hover color.

$tour-back-button-color : Back button color.

$tour-shadow-color : Shadow backdrop that is used for the tour.

$tour-step-color : Background color for the tour step box.

• walkthrough
• customizable

Package Sidebar

npm i ngx-guided-tour

Git github.com/lsqlabs/ngx-guided-tour

github.com/lsqlabs/ngx-guided-tour#readme

Downloads Weekly Downloads

Unpacked size, total files, last publish.

2 years ago

Collaborators

This website requires JavaScript.

Angular Script

Product tour built in angular – ngx tour, description:.

This is a product tour library built with Angular (2+).

You Might Be Interested In:

Related posts, angularjs directives for intro.js library, minimal tour component for angular, product tour ssing angular 2 – ng2 tour, custom tour hints in angular 2+, easy guided tours for angular apps – telemachy, step-by-step walkthrough library for angular material – bdc-walkthrough, add comment.

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

Product Tour Built in Angular

isaacplmann/ngx-tour

Folders and files, repository files navigation, notice: this project is no longer being maintained. ⚠️.

Ngx Tour is no longer being maintained. Ngx UI Tour is the replacement.

Contributors 15

• TypeScript 64.2%
• JavaScript 5.9%

Single-Page Applications (SPA) using Angular

Single-Page Applications (SPA) using Angular

This deck is related to the interactive lecture conducted at Faculty of Information Technology, University of Moratuwa at 29/04/2024.

Source code: https://github.com/nishanc/Angular-SPA-Web-Modal

Nishan Chathuranga

More decks by nishan chathuranga.

Other Decks in Education

Single-Page Applications (SPA) using Angular. NISHAN WICKRAMARATHNA Associate Technical Lead

We’ll be discussing… angular routing spa 4 6 3 1, what is a spa a single page application (spa) is, single-page application lifecycle, routing routing in a single page application (spa) refers to, routing has 4 major components client-side routing component rendering url, routing has 4 major components… • url mapping: in an, framework integration: many javascript frameworks and libraries for building spas,, demontration, components in the context of single page applications (spas), components, components in spas follow the principles of component-based architecture, which, html and layout code supporting the view (data and logic), data binding data binding in angular is the synchronization of, there are several types of data binding in angular •, middleware middleware is a piece of software that sits between, angular http interceptors allow you to intercept http requests and, services / facades in software engineering, a facade is a, in the context of angular services, a facade service can, thank you do you have any questions nishanc.com/contact © 2024/april.