How to integrate intro js with angular 2 cli ? #701

vibingopal · 2017-04-11T15:15:34Z

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 · 2017-05-09T13:11:36Z

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

yossely · 2017-06-14T20:09:19Z

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

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

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>

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 · 2017-06-20T12:12:33Z

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 · 2017-07-03T22:16:18Z

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 · 2017-07-04T13:28:28Z

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 · 2017-07-26T21:36:42Z

I pulled it off using a this method:

Got a type decleration using
npm install --save @types/intro.js
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" />
Declared the variable locally:
declare var introJs: any;
Went on with similar code like displayed above

jorawarsingh · 2017-08-23T04:47:02Z

npm i intro.js @types/intro.js --save-dev
in .angular-cli.json add introjs.css to styles
"../node_modules/intro.js/introjs.css"
in tsconfig.app.json add intojs as types

"types": ["into.js"]
In your component import introjs

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

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 · 2017-08-29T09:38:12Z

I believe this issue is solved.

fhightower · 2017-11-26T15:13:54Z

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 · 2017-12-28T12:55:11Z

@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 · 2018-01-05T10:05:18Z

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 · 2018-01-15T16:35:12Z

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 · 2018-01-25T16:35:09Z

@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 · 2018-03-06T09:30:03Z

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

Thank you :)

fibinger · 2018-03-08T21:49:39Z

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

kevincaradant · 2018-03-29T08:13:29Z

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

brandonatconvex · 2018-06-02T23:53:30Z

My setup in Angular6, piggybacked off of @sameerAhmad9291's excellent answer:

npm install intro.js @types/intro.js --save

in angular.json:

"styles": [
    "node_modules/intro.js/introjs.css"
],
"scripts": [
    "node_modules/intro.js/minified/intro.min.js"
]

in <your-component>.component.ts:

ngAfterViewInit() {
    introJs().start();
}

hajimurtaza · 2018-10-10T17:14:52Z

@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 · 2018-10-29T14:41:25Z

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 · 2018-10-30T07:26:52Z

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 · 2019-03-04T08:14:40Z

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 · 2019-03-28T18:46:14Z

@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 · 2019-04-03T05:22:55Z

@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 · 2019-09-25T14:53:42Z

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

supgunjan · 2020-09-09T05:03:21Z

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

Your provided site cannot be reached.

maitrungduc1410 · 2022-09-25T03:20:33Z

it's very simple, follow my gist to see how to run introjs on angular (>=2) project: https://gist.github.com/maitrungduc1410/68ae50b9c9a6c893959075a1c15871a8

afshinm closed this as completed Aug 29, 2017

ChuyHammer mentioned this issue May 30, 2018

Product Tour Implementation Texera/texera#610

Closed

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to integrate intro js with angular 2 cli ? #701

How to integrate intro js with angular 2 cli ? #701

vibingopal commented Apr 11, 2017

ihsanberahim commented May 9, 2017

yossely commented Jun 14, 2017

vibingopal commented Jun 20, 2017

tomschreck commented Jul 3, 2017

tomschreck commented Jul 4, 2017

assaflei commented Jul 26, 2017

jorawarsingh commented Aug 23, 2017

afshinm commented Aug 29, 2017

fhightower commented Nov 26, 2017 •

edited

Loading

fibinger commented Dec 28, 2017

sameerAhmad9291 commented Jan 5, 2018 •

edited

Loading

vibingopal commented Jan 15, 2018 •

edited

Loading

seanmavley commented Jan 25, 2018 •

edited

Loading

kevincaradant commented Mar 6, 2018 •

edited

Loading

fibinger commented Mar 8, 2018

kevincaradant commented Mar 29, 2018

brandonatconvex commented Jun 2, 2018 •

edited

Loading

hajimurtaza commented Oct 10, 2018

hajimurtaza commented Oct 29, 2018 •

edited

Loading

ghanshyamanand commented Oct 30, 2018

ermarkar commented Mar 4, 2019 •

edited

Loading

LautaroLorenz commented Mar 28, 2019

ermarkar commented Apr 3, 2019

iamravimane commented Sep 25, 2019 •

edited

Loading

supgunjan commented Sep 9, 2020

maitrungduc1410 commented Sep 25, 2022

How to integrate intro js with angular 2 cli ? #701

How to integrate intro js with angular 2 cli ? #701

Comments

vibingopal commented Apr 11, 2017

ihsanberahim commented May 9, 2017

yossely commented Jun 14, 2017

vibingopal commented Jun 20, 2017

tomschreck commented Jul 3, 2017

tomschreck commented Jul 4, 2017

assaflei commented Jul 26, 2017

jorawarsingh commented Aug 23, 2017

afshinm commented Aug 29, 2017

fhightower commented Nov 26, 2017 • edited Loading

fibinger commented Dec 28, 2017

sameerAhmad9291 commented Jan 5, 2018 • edited Loading

vibingopal commented Jan 15, 2018 • edited Loading

seanmavley commented Jan 25, 2018 • edited Loading

kevincaradant commented Mar 6, 2018 • edited Loading

fibinger commented Mar 8, 2018

kevincaradant commented Mar 29, 2018

brandonatconvex commented Jun 2, 2018 • edited Loading

hajimurtaza commented Oct 10, 2018

hajimurtaza commented Oct 29, 2018 • edited Loading

ghanshyamanand commented Oct 30, 2018

ermarkar commented Mar 4, 2019 • edited Loading

LautaroLorenz commented Mar 28, 2019

ermarkar commented Apr 3, 2019

iamravimane commented Sep 25, 2019 • edited Loading

supgunjan commented Sep 9, 2020

maitrungduc1410 commented Sep 25, 2022

fhightower commented Nov 26, 2017 •

edited

Loading

sameerAhmad9291 commented Jan 5, 2018 •

edited

Loading

vibingopal commented Jan 15, 2018 •

edited

Loading

seanmavley commented Jan 25, 2018 •

edited

Loading

kevincaradant commented Mar 6, 2018 •

edited

Loading

brandonatconvex commented Jun 2, 2018 •

edited

Loading

hajimurtaza commented Oct 29, 2018 •

edited

Loading

ermarkar commented Mar 4, 2019 •

edited

Loading

iamravimane commented Sep 25, 2019 •

edited

Loading