Angular 7/6 | Adding Walk-through / Introduction / Tour Plugin for Step by Step Tutorial in Angular 2+ Applications

These days you may have noticed many applications including web and mobile having Tour Introduction to explaining something new or changed features in the application. A user can get to know about various features in this way when element or area is especially focused on a message.

Such interaction is known by many names like Walkthrough, Introductions or Tour. In this post, we will also implement a similar feature inĀ  Angular 7 application.

We are going to add the Intro.js plugin in our Angular application using a simple and quick method.

First, create a new Angular 7 project

Add Intro.js in Angular Project

Include IntroJS CSS and JS library

Open angular.json file on project root then add CSS and JS file in styles and scripts array

Note: To make demo UI look good we have added bootstrap.css (Optional) in the index.html šŸ˜›

We are done with integration on introJS in the project.

Implement in App Component.

Now we will get to know How to use IntroJS in Angular Component?

Open the app.component.ts file, then include introJsĀ as shown below

Then we just need to call introJs().start() on component load or on any event.

We can add steps using two methods

Method 1) HTML attributes

data-intro: The tooltip text of step
data-step: Optionally define the number (priority) of step
data-tooltipClass: Optionally define a CSS class for tooltip
data-highlightClass: Optionally append a CSS class to the helperLayer
data-position: Optionally define the position of the tooltip, top, left, right, bottom, bottom-left-aligned (same as bottom), bottom-middle-aligned, bottom-right-aligned or auto (to detect the position of the element and assign the correct position automatically). Default is bottom
data-scrollTo: Optionally define the element to scroll to, element or tooltip. The default is an element.
data-disable-interaction: To disable interactions with elements inside the highlighted box, true or false (also 1 or 0).

 

Method 2) Steps in JSON

You can check more demos hereĀ 

That’s all you need to implement a great Introduction or Walkthrough plugin in Angular Application.

 

 

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

3
Leave a Reply

avatar
2 Comment threads
1 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
LandonNicholas GallimoreOmar McClellan Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Omar McClellan
Guest

ThereĀ“s a bug if you put the Json steps in the constructor, itĀ“s better if you change the whole thing to the ngOnInit and fire it from there. At least it worked perfectly for me that way.

Nicholas Gallimore
Guest
Nicholas Gallimore

Is there a way to do this across multiple components? I want to have step 1 in component x, and step 2 in component y.

Landon
Guest
Landon

If you are using ids and the vanilla query selector you shouldn’t have any issues going across components.