Show Users How To Use Your App With A Step-By-Step Guide With Intro.js In Angular
Tags: angular, javascript, tutorial, app
Published: 2019-09-16 16:38:32

Step-by-step guide and feature introduction using Intro.JS

Coming up with a new product or a new feature in your Angular app?
If you answered "yes", then this tutorial is for you!

<h2>WHY USING INTRO.JS?</h2>
When new users visit your website or product, you should demonstrate your product features using a step-by-step guide. Even when you develop and/or add a new feature to your product, you should be able to show the new features to your users by creating a user-friendly solution. Intro.js was developed to allow web and mobile developers to create a step-by-step introduction easily.


First we clone the repo app from:
   
   https://github.com/devpato/intro.js-Angular-INITIAL

1. We install the Intro.js & types NPM package.
      ``` npm install intro.js @types/intro.js --save ```

2. Open angular.json file on your project root, then add the Intro.js CSS and the JS file.
   ```json      
            ...
            ...
            "styles": [
              "src/styles.scss",
              "node_modules/intro.js/introjs.css"
            ],
            "scripts": [
              "node_modules/intro.js/intro.js"
            ],
            ...
            ...
   ```
      
3. Import Intro.js to your <strong><i>app.component.ts<i/></strong> at the top of your file.

     ```javascript import * as introJs from 'intro.js/intro.js'; ```

4. In the same file, declare a new variable as followed:
 
      ```javascript introJS = introJs(); ```
5. Now, inside of the same file, add in the ngOnInit the following line:  
      ``` this.introJS.start(); ```


       Your file should look like this:
   ```javascript  
  
          @Component({
             selector: 'app-root',
             templateUrl: './app.component.html',
             styleUrls: ['./app.component.scss']
          })
          export class AppComponent implements OnInit {
             introJS = introJs();
             constructor() {}

             ngOnInit() {
                this.introJS.start();
             }
          }
   ```


6. Now, go to your <strong><i>app.component.html</i></strong> file and change the following line:
    ```<h1 id="step1">PAGE TITLE</h1>```
       
    to

    ```<h1 id="step1" data-intro="Welcome to your new app!">PAGE TITLE</h1> ``` 

7. Time to run our angular app. Type in the terminal: ``` ng serve --o```
   
 
    You should see something like this:
    ![intro.js](https://thepracticaldev.s3.amazonaws.com/i/yvojfih3q4cul6pab9x6.png)

    Ayeeee!! Awesome right? time to do some fancy stuff!


8. Go back to your <strong><i>app.component.ts</i></strong> and add the following code in the constructor.

   ```javacript
       this.introJS.setOptions({
          steps: [
          {
             element: '#step1',
             intro: 'Welcome to your new app!',
             position: 'bottom'
          },
          {
             element: '#step2',
             intro: "Ok, wasn't that fun?",
             position: 'right'
          },
          {
             element: '#step3',
             intro: "let's keep going",
             position: 'top'
          },
          {
             element: '#step4',
             intro: 'More features, more fun.',
             position: 'right'
          }
       ],
       showProgress: true
      });
   ```
   
  


9. Go to your app (your server should be running already). You should see something like this:

    ![intro.js steps]
    (https://thepracticaldev.s3.amazonaws.com/i/f94sf22we4obbzvf8dbx.png)

    Click on the steps for you to see how Intro.js do its magic.

    Now you are wondering: how can I show the steps manually instead 
    page load?


10. Import Intro.js to your <strong><i>sidebar.component.ts<i/></strong> at the top of your file .

     ```javascript import * as introJs from 'intro.js/intro.js'; ```

11. Like we did before, in the <strong><i>sidebar.component.ts<i/></strong> file, declare a new variable as followed:
 
      ```javascript introJS = introJs(); ```

12. In the same file, add the following steps in the function:
<strong> startSteps() </strong>
      ```javascript
       this.introJS
          .setOptions({
           steps: [
           {
             element: '#step1-li',
             intro: 'Welcome to steps on the sidebar!',
             position: 'bottom'
           },
           {
             element: '#step2-li',
             intro: "Ok, wasn't that fun?",
             position: 'right'
           },
           {
             element: '#step3-li',
             intro: "let's keep going",
             position: 'top'
           },
           {
             element: '#step4-li',
             intro: 'More features, more fun.',
             position: 'right'
           }
         ],
         hidePrev: true,
         hideNext: false
        })
        .start();
     ```

13. Now, let's add a button that calls the startSteps() function.

  ```html <button class="btn btn-primary" (click)="startSteps()">SHOW ME 
  STEPS</button>```

Your <strong>sidebar.component.html</strong> should look like this
   ```html
   <div class="sidebar-component">
    <ul>
      <li id="step1-li">
        STEP ONE
      </li>
      <li id="step2-li">
        STEP TWO
      </li>
      <li id="step3-li">
        STEP THREE
      </li>
      <li id="step4-li">
        STEP FOUR
      </li>
    </ul>
    <button class="btn btn-primary" (click)="startSteps()">SHOW ME 
    STEPS</button>
   </div>
   ```
  Let's go to our app! Click on the blue button that says "SHOW ME STEPS". 
  
  You will see the following:

  ![steps by steps guid] 
    (https://thepracticaldev.s3.amazonaws.com/i/nylv1nufojsq87skkw7c.png)

  Finally, you may be wondering how to have steps in between different components.


  In your <strong><i>sidebar.components.ts</i></strong>, where you have the array 
  of options, add this one more option.

   ```json 
          {
            // As you can see, thanks to the element ID
            // I can set a step in an element of an other component
            element: '#step1',
            intro: 'Accessed and element in another component'
          }
   ```


Go back to your app, click the blue button again, and follow the steps to see how the last step jumps to the main title that is in a different component.

<i>
  This is possible thanks to the way Intro.js works to match the string of the element property of the object to the ID of the element in the DOM.
</i>

For more INFO:

https://introjs.com/
https://github.com/usablica/intro.js
https://introjs.com/docs/

FINAL CODE REPO:
https://github.com/devpato/intro.js-Angular-Final

<i>Don't forget to show some love to the tutorial :)</i>


<img src="https://thepracticaldev.s3.amazonaws.com/i/5a87eog40zvcsimuaew4.png" />