angular tour npm

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

ngx-ui-tour-core

UI tour library for Angular 12+

Usage no npm install needed!

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.

Table of contents

Demo and documentation, compatibility, installation, simple project, lazy loaded modules, tourservice, step configuration, event observables, custom template, styling active tour anchor.

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

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.

• Add <tour-step-template></tour-step-template> to your root app component
• Define anchor points for the tour steps by adding the tourAnchor directive throughout your app.
• Define your tour steps using tourService.initialize(steps)
• Start the tour with tourService.start()
• Check out the demo source code for an example.
• Add <tour-step-template></tour-step-template> to your root app component.
• Import TourMatMenuModule.forRoot() into your app module.
• Import TourMatMenuModule into all lazy loaded modules needing the tour.
• 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.
• Define anchor points for your steps by adding the tourAnchor directive throughout your modules (any component that requires it at any level). <div tourAnchor="some.anchor.id">...</div>
• Start the tour with tourService.start() in the same component you initialized your steps. Call this right after the initialization.

How to center tour step?

You can create an invisible anchor point for the tour step you want to center.

• Add a simple div to your html template which will be used as the tour anchor
• Add CSS for the div
• Use previously defined tour anchor

How to disable main content scrolling when UI tour is active?

NOTE: starting with v7 you can simply enable disablePageScrolling step config if you are using md-menu tour UI

If you are using older version or different UI implementation you can still use following guide to achieve this

You can toggle CSS class which disables main content element scrolling when tour starts/ends.

• Create custom TourService :
• Add the no-scroll CSS class to your global stylesheet ( styles.(s)css )
• Use your custom TourService to start the UI tour:

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

Each step can have the following properties.

You can set default values in the TourService.initialize() function.

Any value explicitly defined in a step will override the default value.

Hotkeys are provided using Angular's @HostListener decorator. Hotkeys are enabled when the tour starts and disabled when the tour ends.

• left arrow - previous step
• right arrow - next step
• esc - end tour

The TourService emits events that can be subscribed to like this:

You can also customize the tour step template by providing an <ng-template let-step="step"> inside the <tour-step-template> .

The default template is equivalent to this:

The currently active tour anchor element has a touranchor--is-active class applied to it, so you can apply your own custom styles to that class to highlight the element being referenced.

• Easy to use
• Responsive to window resizes
• Supports multiple tours
• Smoothly scrolls to each step
• Control the placement for each tour tip
• Internet Explorer 10+

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.

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

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ng new does not generate app.module.ts in the src root folder Angular CLI 17.0.0 #52751

anukiransolur commented Nov 9, 2023

alan-agius4 commented Nov 9, 2023 • edited

• 👍 6 reactions

Sorry, something went wrong.

millerraycell commented Nov 9, 2023

JeanMeche commented Nov 9, 2023

• ❤️ 1 reaction

lucasluizss commented Nov 9, 2023

anukiransolur commented Nov 10, 2023

• 🚀 2 reactions

lati57 commented Nov 11, 2023

mvdluit commented Nov 11, 2023

• ❤️ 12 reactions

mvdluit commented Nov 12, 2023

Lati57 commented nov 12, 2023.

Vaishnavi-ambati commented Nov 15, 2023

Mvdluit commented nov 15, 2023.

• 👍 2 reactions
• ❤️ 2 reactions

ProgammingGuy commented Nov 21, 2023

Mvdluit commented nov 21, 2023 • edited.

• 👍 1 reaction

Successfully merging a pull request may close this issue.

This website requires JavaScript.

• Skip to main content
• Keyboard shortcuts for audio player

Fletcher on healing, her new album and being back on tour

NPR's Juana Summers speaks with Cari Fletcher, who goes by the stage name FLETCHER, about her newest album "In Search Of The Antidote" and what it's like to be back on tour.

(SOUNDBITE OF SONG, "TWO THINGS CAN BE TRUE" )

FLETCHER: (Singing) Did we take it too far? Maybe.

JUANA SUMMERS, HOST:

Last spring Carrie Fletcher realized something was wrong - like, more than just the stress of a worldwide concert tour, a deep fatigue that caused long-term concern for her singing voice as well.

FLETCHER: When I had to take the tour down and I saw, you know, applauses get quiet and social media get quiet and then all of the things, you're really forced to, like, look at yourself in the mirror and really decide and see what, you know, your worth is outside of all of those things. Like, there was a lot of silence.

SUMMERS: Turns out it was Lyme disease, and so Carrie, who goes by Fletcher onstage, found herself facing a major physical recovery and a lot of unprocessed mental health to work through. She went back to her hometown in New Jersey, and with all that downtime, she started writing a new album to be called "In Search Of The Antidote."

(SOUNDBITE OF SONG, "ANTIDOTE")

FLETCHER: (Singing) I get high. I get high. I get low. I get low. You're my dopamine state. You're my sanity dose. I get high.

SUMMERS: A year later, Fletcher is out on the road again, singing this new album to her loyal fans. We caught her earlier this week on a day off in Germany, and she was stoked about being back.

FLETCHER: To return back to a sold-out tour with all of these beautiful fans and, you know, like, scream-singing these songs back to me that - some of which I wrote from such a place of desperation but also a place of, like, hope and happiness and love and excitement for the future and - I pinch myself all the time when I get to a new country that I've never even been to before and they're singing word for word with me. It's like - it's insane that this is my job.

SUMMERS: Is there a favorite moment that you could share from the tour that you're on now that really just drives it home for you?

FLETCHER: People have been bringing crazy signs to the show. I have a song called "Becky's So Hot," and there's a point where I'm, like, grinding on a mic stand. And so the fans started doing this thing where they're like, can I be the human mic stand?

(SOUNDBITE OF SONG, "BECKY'S SO HOT")

FLETCHER: (Singing) Are you in love like we were? If I were you, I'd probably keep her - makes me want to hit her when I see her 'cause Becky's so hot in your vintage T-shirt.

There was a sign yesterday that said, truth or dare. And I saw it, and I picked dare. And then she folded the card over again, and it was like, I dare you to let me be your mic stand tonight. Somebody came to a concert dressed up as a microphone to the concert, and I was like, the commitment is real.

SUMMERS: I mean, this album - it's got rage and joy and lust and mess, which is something that you have certainly never shied away from mining, like in the lead single, "Eras Of Us," which I have heard is about running into your ex at Taylor Swift's Eras tour - true story?

FLETCHER: Yes. Truth or dare - that is the truth.

(SOUNDBITE OF SONG, "ERAS OF US")

FLETCHER: (Singing) It's nice to meet you.

Yeah. I had not seen my ex since the day that we had broken up, and we bumped into each other at the Taylor Swift concert. You know, to be at this show where both of us were, like, screaming these songs to an artist that has narrated so many of my breakups, so many of my romances - I just got hit with, you know, a wave of emotion of all of the eras of us, of her and I.

FLETCHER: (Singing) A story of love, stealing the air right from my lungs. Girl of my dreams, forever we're young. Remember it just the way it was, the eras of us.

And I think that's something I always really try to do with my music - is just to drop people into a really specific scene, into a really specific moment. And it's one of my favorite songs I've ever written. It just feels like a story.

SUMMERS: I wonder if you can tell us the story behind one of the songs on the album, "Doing Better," because that song's gotten stuck in my head - this idea of what better really is, why better feels worse.

FLETCHER: Yeah. Wow. I actually have a song on my last album - I have a song called "Better Version," and the lyric ends with, and now some other person's going to get the better version...

(SOUNDBITE OF SONG "BETTER VERSION")

FLETCHER: (Singing) Of me.

...Of me. Just in the last couple months, I was reflecting on, OK, well, what is the better version of me doing? And is she actually doing better? And I wrote a song called "Doing Better" that just really reflects on all the ways of, like, so many of the ways that my career had taken off...

(SOUNDBITE OF SONG, "DOING BETTER")

FLETCHER: (Singing) I'm doing better. I don't know if you remember when I told you in September that you wouldn't recognize me.

...Getting to do all these, like, incredible, incredible things and perform in all these places. And I felt awful.

FLETCHER: (Singing) I felt like I was flying. I felt the stars aligning. I always thought that if I ever got this high, I'd like it. I'm doing better. I've been looking for my center, but my tummy still hurts. Why does better feel worse?

We're kind of sold this narrative of, like, you know, we should have this amount of success by this amount of age and this type of relationship and this degree and this job. And this idea, this dream of better, you know, that we all have - it doesn't feel good. And it's actually, like, the deeper stuff, the stuff that, like, we don't put on display is, like, where so much of the antidote really is.

(SOUNDBITE OF FLETCHER SONG, "GIRL OF MY DREAMS")

SUMMERS: I don't want to get too messy here on public radio, but I do have to ask you about the ladies. I mean, your songs - people call them queer love anthems and queer anthems. And I'm curious how much you think about where your music fits within the sphere of queer pop music. Is that something that's, like, front of mind for you at all?

FLETCHER: When I first started writing, I was, like, really just embarking on my journey with my sexuality and just, you know, when I started talking about all of it for the first time and just falling in love with a girl for the first time. And I never really set out with a specific mission of, like, oh, I need the music to be categorized as this. It was just like, I just need to be free.

(SOUNDBITE OF SONG, "GIRL OF MY DREAMS")

FLETCHER: (Singing) I'm on heartbreak No. 4. Tequila doesn't hit no more. I got a new rebound. I'm falling for me now.

When I think about where my music fits in terms of, you know, the scope of music, it's just - it's meant to go to whoever needs to find it. And my queer journey has been so embraced by the community, and I couldn't ask for anything more. But it's also just - you know, it's also so deeply universal, like, this idea of, like, belonging and...

SUMMERS: Right.

FLETCHER: ...Experiencing love for the first time.

SUMMERS: I mean, that's one of the things that strikes me, right? Whether you are dating a woman or married to a man, there's something really beautiful and universal with the way that you describe these intense and heartfelt and, at times, overwhelming feelings when it comes to love and lust and relationships and all of the spectrum in between there. It's something that works for everybody.

FLETCHER: Oh, I love that. Thank you. Yeah. It's - for me, it's always just - I've never wanted to - anyone to feel, like, alienated from the music, from the emotions, from the feelings. Like, I felt alienated for so long as a kid, you know? I just felt so in my own world and lonely and so sad. And to just - to find that sense of home, like, in myself and in my own music...

(SOUNDBITE OF SONG, "PRETENDING")

FLETCHER: (Singing) I say goodnight as if my heart isn't wrenching.

And that's really what it is for me. It's just, like, the feelings are universal. We all navigate it. We all go through it, no matter how you identify, like, orientation-wise, gender, you know, sexuality. It's - we're human.

SUMMERS: Carrie Fletcher, thank you so much.

FLETCHER: Thank you so much. I appreciate you. This was a really sweet conversation.

SUMMERS: Fletcher's newest album, "In Search Of The Antidote," is out now.

FLETCHER: (Singing) We'll keep on pretending.

Copyright © 2024 NPR. All rights reserved. Visit our website terms of use and permissions pages at www.npr.org for further information.

NPR transcripts are created on a rush deadline by an NPR contractor. This text may not be in its final form and may be updated or revised in the future. Accuracy and availability may vary. The authoritative record of NPR’s programming is the audio record.

angular-shepherd

• 2 Dependencies
• 2 Dependents
• 20 Versions

angular-shepherd is built and maintained by Ship Shape. Contact us for web app consulting, development, and training for your project .

This is an Angular wrapper for the Shepherd , site tour, library. It provides additional functionality, on top of Shepherd, as well.

Compatibility

• Angular 8: 0.5.0
• Angular 9: 0.6.0
• Angular 10: 0.7.0
• Angular 11: 11.x
• Angular 12: 12.x
• Angular 13: 13.x
• Angular 14: 14.x
• Angular 15: 15.x
• Angular 16: 16.x

This has not been tested in anything but Angular 8+. It may or may not work in previous versions or subsequent versions of Angular. We would love to support multiple versions, if people with more Angular knowledge would be willing to help us out!

Installation

NOTE: This may not be the proper Angular way to do everything, as I am not an Angular dev, so please let me know if you have suggestions!

Shepherd ships a single style file, which you will need to include. You can do so by adding it to your angular.json.

Then, you will need to inject the ShepherdService to be able to interact with Shepherd and call addSteps to add your steps, start to start the tour, etc.

You could either do this at the application level, in your application component or on a per component or per route/view basis.

NOTE: It is highly recommended to inject ShepherdService into your app.component.ts . Injecting it at the app level ensures you only create one instance of Shepherd.

In that component you will want to use AfterViewInit to addSteps to the Shepherd service.

Configuration

The following configuration options can be set on the ShepherdService to control the way that Shepherd is used. The only required option is steps , which is set via addSteps .

confirmCancel

confirmCancel is a boolean flag, when set to true it will pop up a native browser confirm window on cancel, to ensure you want to cancel.

confirmCancelMessage

confirmCancelMessage is a string to display in the confirm dialog when confirmCancel is set to true.

defaultStepOptions

defaultStepOptions is used to set the options that will be applied to each step by default. You can pass in any of the options that you can with Shepherd.

⚠️ You must set defaultStepOptions BEFORE calling addSteps to set the steps.

It will be an object of a form something like:

default value: {}

requiredElements

requiredElements is an array of objects that indicate DOM elements that are REQUIRED by your tour and must exist and be visible for the tour to start. If any elements are not present, it will keep the tour from starting.

You can also specify a message, which will tell the user what they need to do to make the tour work.

⚠️ You must set requiredElements BEFORE calling addSteps to set the steps.

default value: []

modal is a boolean, that should be set to true, if you would like the rest of the screen, other than the current element, greyed out, and the current element highlighted. If you do not need modal functionality, you can remove this option or set it to false.

default value: false

You must pass an array of steps to addSteps , something like this:

In Shepherd, you can have as many buttons as you want inside a step. You can build an object with some premade buttons, making it easier to manipulate and insert in new steps. Buttons by default accept three different types: back, cancel, next. In this simple example, we have three buttons: each one with different types and classes.

Buttons have an action property, which must be a function. Whenever the button is clicked, the function will be executed. You can use it for default shepherd functions, like this.shepherdService.complete() or this.shepherdService.next() , or create your own function to use for the action.

⚠️ You can't set up a type and an action at the same time inside a button .

To learn more about button properties, look at the documentation .

Step Options

See the Step docs for all available Step options.

Package Sidebar

npm i angular-shepherd

Git github.com/shipshapecode/angular-shepherd

github.com/shipshapecode/angular-shepherd

Downloads Weekly Downloads

Unpacked size, total files, last publish.

5 months ago

Collaborators