isaacplmann/ngx-tour

Product Tour Built in Angular

Ngx Tour

NOTICE: This project is no longer being maintained. ⚠️

Ngx Tour is no longer being maintained. Ngx UI Tour is the replacement.

ngx-tour's Issues

Styling tour-step-template

Hey, great work! I was wondering if there was an easy way to control the HTML of the tour-step-template. I see the template is included in tour-step-template.component.ts but was curious how I could alter some of the HTML and CSS classes contained there without overwriting with a bunch of messy CSS.

Thanks!

anchorId already registered error

I have a dynamic page with some loops inside (*ngFor)
I try to include anchor for only the first iteration of the loop. I wrap the anchor with a separate div like below:

<div *ngIf="pIndex==0" tourAnchor="panel.test.design.testTitle"></div>

However that does not stop getting the error below:
anchorId panel.test.design.testTitle already registered!

is there anyway to include an if condition that will be checked before trying to register a new anchor?

MdMenu fails to open in AoT mode

When you try to start a tour on a project build with AoT, you get the following error:

Error

Error: Attempting to attach an unknown Portal type. BasePortalHost accepts eithera ComponentPortal or a TemplatePortal.
    at S (polyfills.9110fcd….bundle.js:1)
    at t.e.attach (polyfills.9110fcd….bundle.js:1)
    at e.Z04r.e.attach (polyfills.9110fcd….bundle.js:1)
    at t.e.openMenu (polyfills.9110fcd….bundle.js:1)
    at t.showTourStep (polyfills.9110fcd….bundle.js:1)
    at e.BxEk.e.showStep (vendor.30f0852….bundle.js:1)
    at e.BxEk.e.setCurrentStep (vendor.30f0852….bundle.js:1)
    at vendor.30f0852….bundle.js:1
    at e.invokeTask (polyfills.9110fcd….bundle.js:1)
    at Object.onInvokeTask (polyfills.9110fcd….bundle.js:1)

Custom Template

Hi, it works for me with the default mode. (Running with Angular Material)

However when I replace with the code below, I had some guiding without any style.

<tour-step-template>
    <ng-template let-step="step">
        <md-card (click)="$event.stopPropagation()">
            <md-card-title>
                {{step?.title}}
            </md-card-title>
            <md-card-content>
                {{step?.content}}
            </md-card-content>
            <md-card-actions>
                <button md-icon-button [disabled]="!tourService.hasPrev(step)" (click)="tourService.prev()"><md-icon>chevron_left</md-icon></button>
                <button md-icon-button [disabled]="!tourService.hasNext(step)" (click)="tourService.next()"><md-icon>chevron_right</md-icon></button>
                <button md-button (click)="tourService.end()">End</button>
            </md-card-actions>
        </md-card>
    </ng-template>
</tour-step-template>

npm install --> ng serve -- ERROR

When trying to do as the title states, it provides errors and doesn't get served to localhost:4200. Are there steps that I am missing? I'm looking to be able to run the source code.

ERROR STATEMENT BELOW:

ERROR in C:/Users/jimmy/angularpractice/ngx-tour-master/src/app/console/console.component.ts (1,29): Cannot find module 'ngx-tour-console'.

ERROR in C:/Users/jimmy/angularpractice/ngx-tour-master/src/app/console/console.module.ts (4,35): Cannot find module 'ngx-tour-console'.

ERROR in C:/Users/jimmy/angularpractice/ngx-tour-master/src/app/ng-bootstrap/ng-bootstrap.component.ts (1,29): Cannot find module 'ngx-tour-ng-bootstrap'.

ERROR in C:/Users/jimmy/angularpractice/ngx-tour-master/src/app/ng-bootstrap/ng-bootstrap.module.ts (4,39): Cannot find module 'ngx-tour-ng-bootstrap'.

ERROR in Error encountered resolving symbol values statically. Could not resolve ngx-tour-ng-bootstrap relative to C:/Users/jimmy/angularpractice/ngx-tour-master/src/app/ng-bootstrap/ng-bootstrap.module.ts., resolving symbol NgBootstrapModule in C:/Users/jimmy/angularpractice/ngx-tour-master/src/app/ng-bootstrap/ng-bootstrap.module.ts, resolving symbol NgBootstrapModule in C:/Users/jimmy/angularpractice/ngx-tour-master/src/app/ng-bootstrap/ng-bootstrap.module.ts, resolving symbol NgBootstrapModule in C:/Users/jimmy/angularpractice/ngx-tour-master/src/app/ng-bootstrap/ng-bootstrap.module.ts webpack: Failed to compile.

how use it in ionic 3

Hi sorry for my english
I try to use your library in my ionic 3 projet.
I follow your doc but I can't make it works .

• I install npm install ngx-tour-md-menu @angular/animations @angular/cdk @angular/http @angular/material
• import TourMatMenuModule.forRoot() into my app module
• I import RouterModule is my app module
• I add to my root app component
• I add tourAnchor="some.anchor.id" on elem into my HomeComponent wich is the first and only component load after my root app component
• In my HomeComponent I define tour steps using tourService.initialize(Object with my steps)
• Start the tour with tourService.start()

In console I have "ERROR Error: No provider for Router!"
App module
@NgModule({ declarations: [ MyApp, HomePage ], imports: [ BrowserModule, RouterModule, TourMatMenuModule.forRoot(), IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, HomePage ], providers: [ StatusBar, SplashScreen, TourService, {provide: ErrorHandler, useClass: IonicErrorHandler} ] })

HomeComponent
`@Component({
selector: "page-home",
templateUrl: "home.html"
})
export class HomePage {

constructor(public navCtrl: NavController, public tourService: TourService) {

this.tourService.initialize([{
  anchorId: 'some.anchor.id',
  content: 'Some content',
  title: 'First',
}, {
  anchorId: 'another.anchor.id',
  content: 'Other content',
  title: 'Second',
}]);

this.tourService.start();

}

}`

Tour can not follow dynamically loaded components (ie loaded with ComponentFactoryResolver )

When "tourAnchor"s are applied to the templates of dynamically loaded components these anchors do not show up in the anchors list in the tour service and therefor are not navigable by the tour.

Demo/documentation link on NPM site broken

This link on the readme:

Check out the documentation/demo page.

It looks like it is linking to ng2-tour instead of ngx-tour.

compiler.es5.js:1690 Uncaught Error: Can't resolve all parameters for TourAnchorMdMenuDirective:

Incorporate tour into existing SPA Angular2+ code

I'm hitting a block when trying to place the tour inside of an existing application (project) that is written in Angular 2+.

Would you please help guide me in layman's terms as to how to create a tour inside an application that is already working on its own? The current instructions might be more directed at mid-level or higher experience with Angular 2+... So maybe there are smaller steps that aren't listed as to how to accomplish this.

Please let me know if you need clarification on what I'm asking.

Angular 5?

I'm getting some weird dependency issues after attempting to build with angular 5.

If you take a look at those dependency issues, then my package.json
"@angular/animations": "^5.0.1", "@angular/cdk": "^5.0.0-rc0", "@angular/common": "5.0.0", "@angular/compiler": "5.0.0", "@angular/compiler-cli": "5.0.0", "@angular/core": "5.0.0", "@angular/forms": "5.0.0", "@angular/http": "5.0.0", "@angular/material": "^5.0.0-rc0", "@angular/platform-browser": "5.0.0", "@angular/platform-browser-dynamic": "5.0.0",
The only @angular package missing is the router. So why is it throwing dependency errors for animations, cdk, material, core, common, and http?

Is this not updated to angular 5 yet?

How do I added a tour anchor dynamically?

Installing ng2-tour

Hi,
I'm trying to install the package using the standard npm install ng2-tour
I noticed that the package.json file included in the installation has older peer dependencies than those that exist in the root directory package.json

This is what it requires when installing the package:
npm WARN [email protected] requires a peer of @angular/common@^2.4.5 but none was installed.
npm WARN [email protected] requires a peer of @angular/core@^2.4.5 but none was installed.
npm WARN [email protected] requires a peer of @angular/router@^3.4.5 but none was installed.
npm WARN [email protected] requires a peer of [email protected] but none was installed.
npm WARN [email protected] requires a peer of core-js@^2.4.1 but none was installed.
npm WARN [email protected] requires a peer of scroll-into-view-if-needed@^1.1.0 but none was installed.
npm WARN [email protected] requires a peer of zone.js@^0.7.6 but none was installed.

I edited the package.json file in my local node_modules\ng2-tour, and went off from there .

Remove console.logs

This is very sloppy for a public package, as steps are console logged on showing them.

or make it show with a debug option (angular production mode??)

Repeated component: "ERROR Error: anchorId XXX already registered!"

When using *ngFor or manually including a component (with a defined tourAnchor attribute) multiple times an error is thrown and the page breaks.

Possible solution:
Allow to overwrite anchor bindings (if needed enabled with a configuration option)

Error on NPM Install for bootstrap

I'm very sure the problem isn't permission related, but I can't think what else might be happening.
Thanks for any help you might be able to offer.

Daves-Macbook:frontend dqj$ npm install --save ng2-tour
npm ERR! addLocal Could not install /Users/dqj/Local/dev/apps/pl3/nocti/frontend/node_modules/ng2-tour/ng-bootstrap-ng-bootstrap-1.0.0-alpha.15.tgz
npm ERR! Darwin 16.3.0
npm ERR! argv "/usr/local/Cellar/node/6.8.1/bin/node" "/usr/local/bin/npm" "install" "--save" "ng2-tour"
npm ERR! node v7.2.1
npm ERR! npm  v4.0.5
npm ERR! path /Users/dqj/Local/dev/apps/pl3/nocti/frontend/node_modules/ng2-tour/ng-bootstrap-ng-bootstrap-1.0.0-alpha.15.tgz
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall open

npm ERR! enoent ENOENT: no such file or directory, open '/Users/dqj/Local/dev/apps/pl3/nocti/frontend/node_modules/ng2-tour/ng-bootstrap-ng-bootstrap-1.0.0-alpha.15.tgz'
npm ERR! enoent ENOENT: no such file or directory, open '/Users/dqj/Local/dev/apps/pl3/nocti/frontend/node_modules/ng2-tour/ng-bootstrap-ng-bootstrap-1.0.0-alpha.15.tgz'
npm ERR! enoent This is most likely not a problem with npm itself
npm ERR! enoent and is related to npm not being able to find a file.
npm ERR! enoent 

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/dqj/Local/dev/apps/pl3/nocti/frontend/npm-debug.log

HotkeyOptions from angular2-hotkeys giving an error

This is the error that webpack throws:
core_1.InjectionToken is not a constructor

Please find attached image file :

Not able to install and Use

Can you please help me with a step by step guide to use ng2-tour. I've followed the tutorial but im not getting any tour when i do this.tourService.start();. I have provided and injected using
import { TourService } from 'ng2-tour'; and tourService:TourService.

AOT

I am getting the following error when using AOT:
Error: No component factory found for NgbPopoverWindow. Did you add it to @NgModule.entryComponents?

Any good ideas how I could solve this?

Error: Can't resolve 'scroll-into-view-if-needed'

get this err after install
npm install ng2-tour
and
npm install angular2-hotkeys --save

ERROR in ./~/ng2-tour/src/lib/plugin/ng-bootstrap/tour-anchor.directive.js Module not found: Error: Can't resolve 'scroll-into-view-if-needed' in 'D:\PROJECTS\O4P\node_modules\ng2-tour\src\lib\plugin\ng-bootstrap' @ ./~/ng2-tour/src/lib/plugin/ng-bootstrap/tour-anchor.directive.js 12:29-66 12:78-115 @ ./~/ng2-tour/src/lib/plugin/ng-bootstrap/ng-bootstrap.module.js @ ./~/ng2-tour/index.js @ ./src/app/app.module.ts @ ./src/main.ts @ multi ./src/main.ts

{
  "dependencies": {
    "@angular/animations": "^4.1.3",
    "@angular/cdk": "^2.0.0-beta.8",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/material": "^2.0.0-beta.8",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "@ngx-translate/core": "^7.0.0",
    "@ngx-translate/http-loader": "0.1.0",
    "@types/highcharts": "^4.2.57",
    "@types/socket.io-client": "^1.4.29",
    "angular2-hotkeys": "^2.0.1",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "highcharts": "^5.0.12",
    "js-sha256": "^0.6.0",
    "md2": "0.0.25",
    "ng-inline-svg": "^3.2.1",
    "ng2-highcharts": "^1.0.0",
    "ng2-nouislider": "^1.6.1",
    "ng2-validation": "^4.2.0",
    "ngx-facebook": "^2.4.0",
    "ngx-infinite-scroll": "^0.5.1",
    "nouislider": "^10.0.0",
    "rxjs": "^5.1.0",
    "socket.io-client": "^2.0.3",
    "zone.js": "^0.8.4"
  }
}

Need to access component template that is within an external module

I have a tourAnchor in component A that is in Module A. Module A is in AppModule, and so is my component that has my tourService. However, I cannot access the tourAnchor in component A. I can only directly access tourAnchors in components that are directly imported into the appModule. I have tried to export component A in module A, and nothing happens.

Any suggestions?

Trigger callback function on stepNext()

Hi Isaac,

I open this ticket with a question, is it possible that a click on the next button trigger a function in my component ?

By example: Step 1 is a global presentation. Step 2 is a presentation of a toggled menu with a *ngIf="myVariable". Is it possible that when users click on next from Step 1, a callback function will be triggered and change the value of myVariable to true and display the toggle menu with Step 2 presentation ?

Thanks a lot
Alexis

Demo doesn't go to other routes

Hello,

After starting the program (using these steps:

rm -rf node_modules package-lock.json dist .ng_build
npm install
npm run build:lib:all
npm start

)with it being served to localhost everything appears to be working fine. However, "Start Demo Tour" button only seems to work when MdMenu is selected. When NgBootstrap is selected the "Start Demo Tour" does not start the tour like it does in the live demo.

Do you have any suggestions?

Uncaught (in promise): TypeError: scrollIntoViewIfNeeded is not a function

I'm getting following error, as well on local project where I'm implementing ng2-tour, as in demo-project forked from github...

EXCEPTION: Uncaught (in promise): TypeError: scrollIntoViewIfNeeded is not a function
TypeError: scrollIntoViewIfNeeded is not a function
    at TourAnchorNgBootstrapDirective.showTourStep

(scroll-into-view-if-needed version 1.1.0)

export materialmodule was not found in angular/material

have installed all required modules but getting this error on npm start or build

export materialmodule was not found in angular/material

following is my dependencies list

"dependencies": {
"@agm/core": "1.0.0-beta.0",
"@angular/animations": "^4.4.4",
"@angular/cdk": "^2.0.0-beta.12",
"@angular/common": "^4.2.2",
"@angular/compiler": "^4.2.2",
"@angular/core": "^4.2.2",
"@angular/flex-layout": "2.0.0-beta.8",
"@angular/forms": "^4.2.2",
"@angular/http": "^4.4.4",
"@angular/material": "^2.0.0-beta.10",
"@angular/platform-browser": "^4.4.2",
"@angular/platform-browser-dynamic": "^4.4.2",
"@angular/router": "^4.2.2",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.26",
"@swimlane/ngx-datatable": "9.3.0",
"angular-calendar": "0.17.0",
"angular-sortablejs": "^2.0.6",
"angular-tree-component": "3.7.3",
"chart.js": "2.6.0",
"ckeditor": "4.6.0",
"core-js": "2.4.1",
"css-element-queries": "^0.4.0",
"d3": "^3.5.17",
"dragula": "3.7.2",
"easy-pie-chart": "2.1.7",
"font-awesome": "4.7.0",
"hammerjs": "2.0.8",
"jquery": "2.2.4",
"leaflet": "^1.0.2",
"leaflet-map": "0.2.1",
"moment": "^2.15.0",
"ng2-breadcrumb": "0.5.14",
"ng2-charts": "1.6.0",
"ng2-ckeditor": "1.1.8",
"ng2-device-detector": "^1.0.0",
"ng2-dragula": "1.3.1",
"ng2-file-upload": "1.2.1",
"ng2-translate": "5.0.0",
"ng2-validation": "4.2.0",
"ng2modules-easypiechart": "^0.0.4",
"ngx-color-picker": "^4.0.3",
"ngx-perfect-scrollbar": "^2.0.1",
"ngx-quill": "^1.2.0",
"ngx-tour-md-menu": "^1.0.4",
"ngx-tour-ng-bootstrap": "^1.0.6",
"normalize.css": "^5.0.0",
"nvd3": "^1.8.5",
"quill": "^1.2.6",
"rxjs": "5.4.1",
"screenfull": "^3.2.2",
"sortablejs": "^1.6.0",
"ts-helpers": "^1.1.2",
"withinviewport": "^2.0.0",
"zone.js": "0.8.14"
},

tourService.start() emits tourService.end()

I have set up a tour following your demo source for ng-bootstrap. I added four steps which seem to be recognized, as I am able to call e.g. startAt(1) at it doesn't complain about non-existent steps. I start the tour automatically and have a button to toggle the tour. As shown in the example I have subscribed to the events of the tourService so I can see that a start or resume event is always followed by and end event immediately. Like this:
{name: "start", value: undefined}
{name: "end", value: undefined}
Do you have any idea where to start further debugging? The popup doesn't show but there is no error at all, only the end-event right after each start or resume event.

install project and run without errors, but can't see tour

i follow instruction and install according to guide but i can't see any popup's tour.
can you help here ?

AOT Compilation Error: import withinviewport from 'withinviewport';

I am getting an error when I try to rollup the project (after AOT compiled), when I use ngx-tour. The error is as below. Maybe I should add something in rollup.config.js but I dont know what exactly.

[!] Error: 'default' is not exported by node_modules\withinviewport\withinviewport.js
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module
node_modules\ngx-tour-md-menu\ngx-tour-md-menu\ngx-tour-md-menu.es5.js (20:7)
18: import { Subject } from 'rxjs/Subject';
19: import { Directionality, MdButtonModule, MdCardModule, MdIconModule, MdMenu, MdMenuModule, MdMenuTrigger, Overlay } from '@angular/material';
20: import withinviewport from 'withinviewport';
           ^
21: var TourState = {};
22: TourState.OFF = 0;

Module '"D:/www/AnnualReportWeb/node_modules/@angular/material/material"' has no exported member 'Directionality'.

Hi! great work 👍 demo works well online but tried in my project and getting some error. Your module is depeneden on Directionality from material but there is no such exported. i went through material and could not found it.

Issue using the nextStep field in IStepOption

When set nextStep = 0 ( go to the first step in the array) in currentStep, it try go to the next step in the array from currentStep, for instance

[
   ...
   {
      anchorId:  'mtour.anchor',
      content:  'Some content',
      title:  'Test Anchor',
      nextStep: 0
   },
  ...
]

It seem caused by this segment of code in tour.service.ts

  public next(): void {
    if (this.hasNext(this.currentStep)) {
      this.goToStep(this.loadStep(this.currentStep.nextStep || this.steps.indexOf(this.currentStep) + 1));
    }
  }

Need some Help

Hi Isacc
i did the implementation.However after clicking the next button to go to next tour throwes error and exit the program any suggestions?

SystemJS installation instructions

I need help from someone with SystemJS experience. How would you consume this library with SystemJS? Do I need to change anything in the code to make that possible?

step stay on top left

Hi
After severals brains explosions I succesfully install your library on my ionic project and it works except for "step card" placement. They stay on top left of the screen instead of follow the element wich they are linked. I didn't read anything in your doc about that.

package.json
"dependencies": { "@angular/animations": "4.4.4", "@angular/cdk": "2.0.0-beta.12", "@angular/common": "4.4.4", "@angular/compiler": "4.4.4", "@angular/compiler-cli": "4.4.4", "@angular/core": "4.4.4", "@angular/forms": "4.4.4", "@angular/http": "4.4.4", "@angular/material": "2.0.0-beta.12", "@angular/platform-browser": "4.4.4", "@angular/platform-browser-dynamic": "4.4.4", "@ionic-native/core": "4.3.2", "@ionic-native/splash-screen": "4.3.2", "@ionic-native/status-bar": "4.3.2", "@ionic/storage": "2.0.1", "ionic-angular": "3.8.0", "ionicons": "3.0.0", "ngx-tour-md-menu": "^2.0.0-beta.12", "rxjs": "5.4.3", "sw-toolbox": "3.6.0", "zone.js": "0.8.18" }

angular/animations core http are in 4.4.4,
angular/material and cdk are in 2.0.0-beta.12

Apply a class to outer MdMenu container

Any way to add a class to the outer menu container so I can nudge it around from an anchor point?

<div class="mat-menu-panel ng-tns-c10-1 tour-step mat-menu-after mat-menu-below ng-trigger ng-trigger-transformMenu" role="menu" ng-reflect-klass="mat-menu-panel" ng-reflect-ng-class="[object Object]" style="opacity: 1; transform: scale(1);"><div class="mat-menu-content ng-trigger ng-trigger-fadeInItems" style="opacity: 1;">

Thats the element I would want to apply the class to.

popover element added additional between routes

current behavior happens in demo page so i didn't make plunker but after stepping the tour to next route, while developer tools is open, this is the image i got:

body max height conflict with sticky footer

recently i installed ng2-tour to my project but i counting on wierd behavior which my stick footer stucks in bottom of the view port.
after few research i saw weird style rule in this library code:

styles: ['body { max-height: 100vh; }']

tour-step-template.component.ts

i made plunker of bootstrap-4-sticky-footer with body { max-height: 100vh; } and more content (for scrolling) to demonstrate the problem:

error on npm install "Unexpected value 'Hotkeys' declared by the module 'HotkeyModule'

I did a fresh clone (on Windows 7 Pro, nodejs 6.9.1)
when I try to do a npm install I get the following error

> ngc -p ./tsconfig.aot.json

Error: Unexpected value 'Hotkeys' declared by the module 'HotkeyModule'
    at d:\___mprojects\__c\angular2\ng2-tour-2\node_modules\@angular\compiler\bundles\compiler.umd.js:17816:42
    at Array.forEach (native)
    at CompileMetadataResolver.getNgModuleMetadata (d:\___mprojects\__c\angular2\ng2-tour-2\node_modules\@angular\compiler\bundles\compiler.umd.js:17798:56)

    at addNgModule (d:\___mprojects\__c\angular2\ng2-tour-2\node_modules\@angular\compiler\bundles\compiler.umd.js:24349:60)
    at d:\___mprojects\__c\angular2\ng2-tour-2\node_modules\@angular\compiler\bundles\compiler.umd.js:24360:16
    at Array.forEach (native)
    at _createNgModules (d:\___mprojects\__c\angular2\ng2-tour-2\node_modules\@angular\compiler\bundles\compiler.umd.js:24359:28)
    at analyzeNgModules (d:\___mprojects\__c\angular2\ng2-tour-2\node_modules\@angular\compiler\bundles\compiler.umd.js:24238:16)
    at analyzeAndValidateNgModules (d:\___mprojects\__c\angular2\ng2-tour-2\node_modules\@angular\compiler\bundles\compiler.umd.js:24248:37)
    at AotCompiler.compileAll (d:\___mprojects\__c\angular2\ng2-tour-2\node_modules\@angular\compiler\bundles\compiler.umd.js:23987:20)
Compilation failed

Support for ngx-bootstrap

Provide support for ngx-bootstrap alongside Angular Material and ng-bootstrap.

Reference #15

Uncaught SyntaxError: Unexpected token import - popover.js

Giving an error while importing TourNgBootstrapModule.root() in app.module.ts.
I simply install ng2-tour and hotkey module and import to app.module.
Its giving from @ng-bootstrap/ng-bootstrap/popover/popover.js

Backdrop Support

Is ng2-tour support backdrop functionality? If yes, please let me know how can i enable it?

the project is loading fine but no tour step has been displayed in angular-cli template

i followed the steps as the demo and install everything and project is loading fine but no steps have been displayed

1. use angular-cli project template
2. install scroll-into-view (https://github.com/stipsan/scroll-into-view-if-needed)
3. install angular-hotkeys (https://www.npmjs.com/package/angular2-hotkeys)
4. install ng2-tour

and then follow all steps as ur step, i attached package json file
package.txt

in the app.component.ts , in constructor the following code

this._tourService.initialize([{ anchorId: 'anchor.KPISubmission', content: 'welcome to Some content', placement : 'below', route:'dashboard', title: 'First', }]); this._tourService.start();

Pls advise

Error: importing `TourNgBootstrapModule` into app module

Hey there,

Installing new version of @ng-bootstrap/ng-bootstrap fixes #2!

I am now running into a new error attempting 2) import TourNgBootstrapModule into your app module from your tutorial site by doing:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { TourNgBootstrapModule } from 'ng2-tour/src/lib/plugin/ng-bootstrap/ng-bootstrap.module';

@NgModule({
  imports: [
    CommonModule,,
    TourNgBootstrapModule
  ]
})

export default class AppModule { }

I am getting:
Error: Unexpected value 'TourNgBootstrapModule' imported by the module 'ManagerModule'

Am I attempting this correctly? Any advice you can offer would be great appreciated, cheers!

<template> element is deprecated

Use <ng-template> instead

How to toggle CSS dimmable background linear-gradient

Hello,

Thank you for your support and work on this plugin. How to turn on the background gradient opacity to darken the background and focus the users attention to the tour, and also highlight your element?

This is doable in the bootstrap version and the angular 1 version, but how do you accomplish this within this plugin ngx-tour?

update ngx-tour-core dependency of zone.js to match that of ngx-tour

I was hoping that you could update ngx-tour-core dependency of zone.js to match that of ngx-tour, ^0.8.12.

This is causing package unmet dependencies on install of this package.

I attempted to fork and do a PR, but I cant seem to get the change to work.. Keeps saying "npm WARN [email protected] requires a peer of zone.js@^0.7.6 but none was installed."

Then again, I am not the best with NPM and packaging.

Thanks

Multipage tour

My website uses different components, each with an individual URL.
Is there anyway I can traverse through these components to give a full website tour to the user?

Not able to make it work

I have tried all 3 options for material, bootstrap and console. Tour never starts.

I am using angular 4.

1. Downloaded packages
2. Included TourConsoleModule.forRoot() in app.module.ts
3. used tourservice.initialize in app.component.ts
4. used tourservice.start() in login.componenet.ts

Do not see anything in console. tourservice.start function is being called correctly.
No errors showing up

Tour starts but no menu

Hi isaacplmann,
I'm trying to use your module in an ionic app using angular. I've set everything up with the tourAnchors and installed the packages, but when I try to start the tour I don't see anything on my screen. I subscribed to the start and initialize events, which both fire right (the $start IStepOption is undefined, though).

I compared the demo page to mine and it turns out I'm completely missing the cdk-overlay-container that has the tour text. On the demo, it's here:

I do have the in my code but it doesn't have anything displayed.

Any advice? It could be some other issue as well. I'm using @angular/cdk and @angular/material version 2.0.0-beta.11, because I got some errors with the later versions. Please let me know if you need more info or have any questions. Thanks for making this wonderful library!

Showing html as plain text

I have integrated it successfully and I am trying to show html in tour box but its showing only plain text with tags as text. Is there a way to show html in tour box ?

How to change Step template?

Hey!
Is there any way to override default step template for all provided steps?