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

2. 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" />

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

4. 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? 

![screenshot_2](https://user-images.githubusercontent.com/7203792/29599250-24cc4c06-87ec-11e7-93ab-9cf96a395908.png)

[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 :)