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.

 

 

Leave a Reply

avatar
  Subscribe  
Notify of