Intro.js: How to integrate intro js with angular 2 cli ?

[vibingopal]

Hi Team,

I am working on using intro js in my application which is built using angular 2 framework.

Could you please suggest me any idea how to integrate it or any example already implemented with Intro js + angular 2.

Thank you

[ihsanberahim]

May be can try this
https://github.com/millerscout/ng2-introjs

[yossely]

Hi @vibingopal! I recently wanted to use intro.js with my angular2 application what I did was:

1. Install the npm package intro.js using npm install intro.js --save

2. Add the respective js and css files in my index.html like this:

   <!-- Guide library - Intro.js for step by step tutorial -->
   <link rel="stylesheet" href="node_modules/intro.js/minified/introjs.min.css">
   <script src="node_modules/intro.js/minified/intro.min.js"></script>
   

3. Start the step by step tutorial in my component with this:

   let intro = introJs();
   // Initialize steps
   intro.setOptions({
       steps: [
           {
               element: '#step_one_element_id',
               intro: "Step one description",
               position: 'right'
           },
           {
               element: '#step_two_element_id',
               intro: "Step <i>two</i> description",
               position: 'bottom'
           },
           {
               element: '#step_three_element_id',
               intro: 'Step <span style="color: green;">three</span> description',
               position: 'left'
           }
       ]
   });
   
   // Start tutorial
   intro.start();
   

Hope this helps you 🙂

[vibingopal]

Thank you for your response. Do i need to import the introjs module in app.module. I am seeing an error now with the statement let intro=introJs()

[tomschreck]

Hello. I'm trying to integrate intro.js as well into my Angular 4 app. I have intro.js working as long as I manually configure HTML with attributes. I'd like to, however, put all of my intro data in a JSON file and load that through code and kick off intro via a button click (calling a function in my Angular component). How do I get typescript to recognize and load intro.js so I can compile my component?

[tomschreck]

I figured it out. I was using import { IntroJs } from 'intro.js'; but that was not working. I changed the code in my component to const IntroJs = require('../../../../node_modules/intro.js/intro.js'); and am able to load Intro.Js into my component.

[assaflei]

I pulled it off using a this method:

1. Got a type decleration using
   npm install --save @types/intro.js

1. In my component ts file started with a reference to the new index.d.ts
   /// <reference path="../../../../../node_modules/@types/intro.js/index.d.ts" />

2. Declared the variable locally:
   declare var introJs: any;

3. Went on with similar code like displayed above

[jorawarsingh]

1. npm i intro.js @types/intro.js --save-dev

2. in .angular-cli.json add introjs.css to styles
   "../node_modules/intro.js/introjs.css"

3. in tsconfig.app.json add intojs as types

   "types": ["into.js"]

4. In your component import introjs

   import introJs from 'intro.js/intro.js';

5. And finally create instance of introjs and pass options

   introJs.introJs().setOptions({
       steps:  [{
                    element: '#step1',
                     intro: 'Step one description',
                     position: 'bottom'
                   },
                   {
                      element: '#step2',
                      intro: 'Step <i>two</i> description',
                     position: 'bottom'
                   },
                   {
                     element: '#step3',
                     intro: 'Step <span style="color: green;">three</span> description',
                     position: 'bottom'
                   }]
   }).start();
   

There is one issue i am trying to solve that The element which should be highlighted is behind helperLayer not highlighted. any idea?

[afshinm]

I believe this issue is solved.

[fhightower]

Thanks for all of the help @yossely and @tomschreck ! For any future visitors, I have a working demo using intro.js in an angular 4 app here: https://github.com/fhightower-templates/angular4-introjs-demo .

[fibinger]

@jorawarsingh 's solution is fine, however it stopped working with new Angular-CLI in version 1.6.2 with following error:
Cannot read property 'introJs' of undefined

Do you have the same issue?

[sameerAhmad9291]

For Angular4

• npm install intro.js --save

In angular-cli.json

• add "../node_modules/intro.js/minified/introjs.min.css" in "styles".
• add "../node_modules/intro.js/minified/intro.min.js" in "scripts".

In tsconfig.app.json

• "types": [ "node" ]

Angular component code

change path according to your directory

• const IntroJs = require('../../../../../node_modules/intro.js/intro.js');
  let guide = IntroJs.introJs();

references
https://stackoverflow.com/questions/43104114/cannot-find-name-require-after-upgrading-to-angular4

[vibingopal]

Could any of you please let me know that how to call second component from home component using intro js in typescript? Unable to do that

How to write the below JS code in TS, since in angular everything is part of index.html and we no need to call explicilty other html files

 <script type="text/javascript">
      document.getElementById('startButton').onclick = function() {
        introJs().setOption('doneLabel', 'Next page').start().oncomplete(function() {
          window.location.href = 'second.html?multipage=true';
        });
      };
    </script>

[seanmavley]

@afshinm

I believe this issue is solved.

And what makes you so sure?

As the creator of the intro.js, what is your recommended way for us to import the library for use in Angular 5+, today?

[kevincaradant]

@fibinger,
I have the same error as you. Did you find a solution / workaround ?

Thank you :)

[fibinger]

@kevincaradant
I am afraid not. We decided to implement our own walkthrough feature anyways.

[kevincaradant]

@fibinger, Ohh alright :/, thank you for your answer.

[hajimurtaza]

@brandonatconvex Hi i implemented this in my application but instead of loading in the component , its calling this method and showing the introjs elements in index.html page, completely breaking the DOM.
If you could point to a github which has it as a wrapper or a proper angular 5/6 implementation. I will be grateful

[hajimurtaza]

Could any of you please let me know that how to call second component from home component using intro js in typescript? Unable to do that

How to write the below JS code in TS, since in angular everything is part of index.html and we no need to call explicilty other html files

 <script type="text/javascript">
      document.getElementById('startButton').onclick = function() {
        introJs().setOption('doneLabel', 'Next page').start().oncomplete(function() {
          window.location.href = 'second.html?multipage=true';
        });
      };
    </script>

This is how i am doing. Hope it helps
firstcomponent.component.ts

 NgOnInit(){   //I use it on initialization, you can put it in a start button, your choice
 introJs.start().onchange(()=>{
      if(introJs._currentStep == '<yourStepNumber>'){
           this.router.navigate('your_url'); // replace with your own page navigation logic
      }
 });
 }

Make sure you exit the tour when moving to next page by calling the exit method onInit of new component

secondcomponent.component.ts

  NgAfterViewInit(){
       introJs.exit().start().goToStep(*next_step_number*);
  }

[ghanshyamanand]

Thank you for your response. Do i need to import the introjs module in app.module. I am seeing an error now with the statement let intro=introJs()

Decalre declare let introJs: any; at the top of the page.

[ermarkar]

Install intro.js using

yarn add intro.js

or

npm install --save intro.js

Add css in angular.json

"styles": [
     "node_modules/intro.js/introjs.css"
]

JS

"scripts": [
     "node_modules/intro.js/intro.js"
]

and now in ts file

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

[LautaroLorenz]

@ermarkar answer works, but...

"styles": [
"node_modules/intro.js/introjs.css",
"node_modules/intro.js/themes/introjs-dark.css"
]

not working for theme dark

[ermarkar]

@ermarkar answer works, but...

"styles": [
"node_modules/intro.js/introjs.css",
"node_modules/intro.js/themes/introjs-dark.css"
]

not working for theme dark

Is this path node_modules/intro.js/themes/introjs-dark.css exist? and if so then css rules are geeting loaded on browser?

[iamravimane]

complete tutorial (integration with angular 2,6,7,8)

[supgunjan]

complete tutorial (integration with angular 2,6,7,8)

Your provided site cannot be reached.