Closed vibingopal closed 7 years ago
May be can try this https://github.com/millerscout/ng2-introjs
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 🙂
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()
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?
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.
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
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?
I believe this issue is solved.
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 .
@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?
For Angular4
In angular-cli.json
In tsconfig.app.json
Angular component code
change path according to your directory
references https://stackoverflow.com/questions/43104114/cannot-find-name-require-after-upgrading-to-angular4
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>
@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?
@fibinger, I have the same error as you. Did you find a solution / workaround ?
Thank you :)
@kevincaradant I am afraid not. We decided to implement our own walkthrough feature anyways.
@fibinger, Ohh alright :/, thank you for your answer.
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();
}
@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
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*);
}
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.
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';
@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 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?
complete tutorial (integration with angular 2,6,7,8)
complete tutorial (integration with angular 2,6,7,8)
Your provided site cannot be reached.
it's very simple, follow my gist to see how to run introjs on angular (>=2) project: https://gist.github.com/maitrungduc1410/68ae50b9c9a6c893959075a1c15871a8
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