hakimio/ngx-ui-tour

✈️ UI tour for Angular apps

UI tour library for Angular

Angular Material, Ionic, Taiga UI, Ng Bootstrap and Ngx Bootstrap UIs are supported.

ngx-ui-tour is a fork of Isaac Mann's ngx-tour. The project had to be forked since the original is no longer maintained.

---

Table of contents

• Demo and documentation
• Compatibility
• Installation and Usage
• FAQ
• TourService
• Step Configuration
• Defaults
• Hotkeys
• Event Observables
• Custom template
• Styling Active Tour Anchor
• License

Demo and documentation

Demo and documentation can be found at hakimio.github.io/ngx-ui-tour

Compatibility

Material Design and Ngx Bootstrap tour UIs

Angular	RxJS	ngx-ui-tour
17	7	12
16	7	11
15	7	10
14	6, 7	9
12-13	6, 7	8
9-12	6	7

NG Bootstrap tour UI

Angular	RxJS	ngx-ui-tour
17	7	14
16	7	13
15	7	12
14	6, 7	11
12-13	6, 7	10
9-12	6	9

Ionic tour UI

Angular	RxJS	Ionic	ngx-ui-tour
17	7	7	3
16	7	6, 7	2
15	7	6, 7	1

Taiga UI tour UI

Angular	RxJS	Taiga UI	ngx-ui-tour
17	7	3	6
16	7	3	5
15	7	3	4
14	6, 7	3	3
12-13	6, 7	2	2
9-12	6	2	1

Installation and Usage

• Material Design UI
• Ionic UI
• NG Bootstrap UI
• Ngx Bootstrap UI
• Taiga UI Dropdown UI
• Taiga UI Hint UI
• JavaScript Console UI

FAQ

Documentation page

Step Configuration

Documentation page

Defaults

Documentation page

TourService

Documentation page

Event Observables

Documentation page

Hotkeys

Documentation page

Custom template

Documentation page

Styling Active Tour Anchor

Documentation page

License

MIT

ngx-ui-tour's Issues

how to get input like "click" then move to next pop-up ?

i'm trying to implement ngx-ui-tour in my application.

1. i want "user" to click a element mandatory, then move to next popup, is it possible to implement it in ngx-ui-tour.

2. i want to change position of popup , i tried in below way

this.tourService.initialize([{
            anchorId: 'some.anchor.id',
            content: 'Select Product',
            title: 'step 1'
          }],{
          enableBackdrop: true,
          placement : 'right'
 });

but it showing error.

3. how can i not showing "Prev" and "Next" button in popup?

4. Also how can i route based on the button click?

Thanks in advance.

Creating a custom Step without Next Button

I would like to create a custom Step component that has no next button, but is only used for some steps, which require user input in order to progress in the tour.
I read in other issues and the docs that you can use a Custom template, but I did not understand how I can create one and set it for a certain step as the template. Could you provide a little bit more detail on how to do that?

Anchor registration is not happening in the proper sequence

I have a demo project in which the tool is working. The code (in ngOnInit) looks like this:

this.tourService.events$.subscribe(event => console.log(event));

this.tourService.initialize([
  {
    anchorId: 'first',
    content: 'Start a new investigation',
    title: 'First'
  },
  {
    anchorId: 'second',
    content: 'This is a really long content to see how the content fits in the popup box and if it wraps or just makes the box really wide',
    title: 'Second'
  },
  {
    anchorId: 'third',
    content: 'This is a really long content to see how the content fits in the popup box and if it wraps or just makes the box really wide',
    title: 'Third'
  }
],
{
  enableBackdrop: true
});
this.tourService.start();

When I fire it up the console output looks like the below and everything works as expected:

So, I then setup my real project and it has similar slightly more simplified code in it:

this.tourService.events$.subscribe(event => console.log(event));
this.tourService.initialize(
  [
    {
      anchorId: 'one',
      title: 'New Investigation',
      content: 'Click this button to start a new investigation'
    }
  ],
  { enableBackdrop: true }
);
this.tourService.start();

However, this results in the following console log and I get no popups:

So, the question is, what could cause this seemingly out of sequence set of events where the tour is starting before the anchors are registered? I've tried putting the tour start in the AfterViewInit lifecycle hook and also tried putting the tour initialize in the component's constructor but it results in the same output.

Tip is not working properly on resize

Hello!
I am using this awesome library within an Angular 10 app.
The issue I have with it is that on resize it is broken. Please note that this happens only when using the backdrop.
Without the backdrop, the tooltip follows its element flawlessly like on the demo page, but when you enable the backdrop, the backdrop itself is not updating accordingly, which results in it covering the highlighted element.

Thanks!

Backdrop overflows tourAnchor element if it's resized when page not scrollable

Setup:

• Show backdrop
• Set page not scrollable

I have two scenarios when backdrop isn't placed well:

1. If I want to add border 2px for class .touranchor--is-active to highlight the element - bottom backdrop class overflows the element
2. If my tourAnchor change size (for example menu that can be collapsed/expanded) backdrop is not updated

It would be great if we can track element resize and update backdrop position.
Seems that page resize isn't triggered in this case.

When user presses back button on the browser - backdrop still exists however tooltip isn't shown

When steps have route set and the user presses the browser's back button - the backdrop still exists but no tooltip is shown.

As result:
User can't stop the tour and no tooltip is shown. But interaction with the page is disabled by the backdrop.

Can the prev step be shown if prev step route is active?

Should there be some warning message if you want to exit the tour in this case?

Using the Zone.js RxJS polyfill causes recursion issues

There is a problem running the tours in apps with the Zone.js Rxjs polyfill included.

Here is a repo
(and stack blitz ).

It seems when the polyfill line import 'zone.js/dist/zone-patch-rxjs'; is included this then throws all kinds of problems, mostly with it recursively calling across the two zones ( and angular). I've tried with both ng-bootstrap and ngx-bootstrap. Haven't used Material as our app uses bootstrap.

In the ngx-bootstrap it seems the directive being included causes the most issues. And in ng-bootstrap it's only when start is called that it throws the error.

Tour won't start on child page

I'm using Angular 13 with ngx-ui-tour-ng-bootstrap v8.1 and ngx-ui-tour-core 6.1. I'm trying to setup the tour to start on s child page because I have to only start it after the user has authenticated. So, I put the <tour-step-template></tour-step-template> element in the child page and I have initialized and started the TourService in this child page like so:

this.tourService.initialize([
  {
    anchorId: 'landingpage.new',
    content: 'Start a new investigation',
    title: 'New Invesgtigation',
    route: '/home/landing-page'
  },
  {
    anchorId: 'landingpage.list',
    content: 'Here is the list of investigations',
    title: 'Invesgtigations',
    route: '/home/landing-page'
  }

],
{
  enableBackdrop: true
});
this.tourService.start();

In the landing page HTML I have these two elements

<button tourAnchor="landingpage.new" class="m-0 btn btn-primary d-flex align-items-center flex-00a"

<table tourAnchor="landingpage.list" (matSortChange)="sortData($event)" class="assessment-summary" style="overflow-x:auto">

When I debug on the line where I call tourService.start() the tour service shows that it is configured with the tour steps that I defined yet the tour never starts up. What am I doing wrong?

No provider for TourBackdropService in spec file after Upgrade from 8.1.0 to 9.1.0

During updating my Angular Application from version 13 to version 14 I also did update ngx-ui-tour-md-menu from version 8.1.0 to version 9.1.0.

The updated Application did work as expected when served, but all component tests which do use the TourService suddenly kept failing with the Error: NullInjectorError: No provider for TourBackdropService!.

I was able to fix this by providing said service from the ngx-ui-tour-core module with no problem. I just wanted to clarify if this behavior is as expected with version 9.1.0?

angular material installed, it doesn't build

Error: node_modules/@angular/material/button/button.d.ts:21:22 - error TS2420: Class 'MatButton' incorrectly implements interface 'CanColor'.
Type 'MatButton' is missing the following properties from type 'CanColor': color, defaultColor

Update to Angular 14

Hello!

I was trying to update my project to Angular 14 and got errors in my tests regarding this module.
Are there any plans in upgrading the module to be compatible with Angular 14?

Thanks in advance.

Introduce `delayBeforeStepShow` step config

I made a poc with ngx-ui-tour (material) and I found out that there are issues when also using the css style:
scroll-behavior: smooth;

This happens: When the next tour step highlights a button on the very bottom of the page (so scrolling is necessary to see it) the step popover is showing too early - it shows before the scrolling has finished and therefore has lots of space between its position and the button's postion.

Possible solution: Maybe another option would be helpfull to delay the next popover a couple of ms like in delayAfterNavigation (maybe named delayNextStep)?

Extending the tour service leads to unregistered anchor ids

Hi,

in my Angular Application I wrote a new Service which extends the TourService so that I can add some additional methods I need.

Extending the service does not work as expected tough. Using the inherited methods like this.tourService.initialize() or this.tourService.startAt() works but in the end the service always fails with: Can't attach to unregistered anchor with id app-home in the showStep() method because this.anchors seems to be empty.

During debugging I realized that somehow the information about registered anchor IDs is missing.

I set a a minimal example using your lazy-loaded-tour example which you can find in this repo. It is also setup for debugging with VSC if this helps.

Is this a bug or am I doing something wrong regarding the inheritance?

Unexpected focus behaviour in navigation menu

Hi!

I am using you library to highlight some navigation items on our web page. I noticed an unexpected behavior regarding the :focus pseudo class of the navigation items.

It seems that the navigation item that has been highlighted before the current step has the pseudo class :focus assigned to it. This seems to be a little bit confusing for me as the users attention should solely be on the current highlighted tour step element. (See screenshot)

I also provided a minimal example where you can take a look a the issue. It seems to be only the case for mat navigation items though. So maybe it has something to do with the material component and not your library.

Unable to find closeOnOutsideClick param in TypeScript

Hello!

I wanted to use the new closeOnOutsideClick: true option parameter but I cannot find it under the usual IStepOption interface:

export interface IStepOption {
    stepId?: string;
    anchorId?: string;
    title?: string;
    content?: string;
    route?: string | UrlSegment[];
    nextStep?: number | string;
    prevStep?: number | string;
    placement?: any;
    disableScrollToAnchor?: boolean;
    prevBtnTitle?: string;
    nextBtnTitle?: string;
    endBtnTitle?: string;
    enableBackdrop?: boolean;
    isAsync?: boolean;
    isOptional?: boolean;
    delayAfterNavigation?: number;
}

I have the latest version installed:

"ngx-ui-tour-core": "^8.0.1",
"ngx-ui-tour-md-menu": "^8.0.2",

Thanks in advance.

How to provide TourService in Component spec file?

When, I run a jasmine test the following error is thrown:
NullInjectorError: R3InjectorError(DynamicTestModule)[NgxmTourService -> NgxmTourService]: NullInjectorError: No provider for NgxmTourService!

I tried providing it but this leads to additional errors.

Merge repositories

Hi,

@krmarien and me have been working on keeping ngx-tour up to date, and adding some things like automatic releases, specific git submodules etc., would you agree on joining efforts arround https://github.com/ngx-tour/ngx-tour (@ngx-tour/core)?

Unit testing

Hello!

I haven't found any documentation on how to stub the TourService (NgxmTourService) in order to succesfuly unit test a component which injects it.

My component:

constructor(
    public tourService: TourService,
) { }

My spec:

beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [

      ],
      declarations: [
        TourComponent,
      ],
      providers: [
        { provide: NgxmTourService, useValue: NgxmTourServiceStub },
      ],
    })
    .compileComponents();
});

My stub:

export const NgxmTourServiceStub: any = {
    // TODO
};

It gives me this error:

1) should create
     TourComponent
     NullInjectorError: R3InjectorError(DynamicTestModule)[NgxmTourService -> NgxmTourService]: 
  NullInjectorError: No provider for NgxmTourService!

Error: ./src/app/shared/tour/tour.component.spec.ts
Module not found: Error: Can't resolve 'ngx-ui-tour-md-menu/lib/md-menu.module' in 'C:\xxxx\xxxx\workspaces\mage\src\app\shared\tour'
resolve 'ngx-ui-tour-md-menu/lib/md-menu.module' in 'C:\xxxx\xxxx\workspaces\mage\src\app\shared\tour'
  Parsed request is a module
  using description file: C:\entornos\MAGE\workspaces\mage\package.json (relative path: ./src/app/shared/tour)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module

Can you help me with this?

Thanks in advance.

Cannot position tour-element by config property

This is propably more of a featurerequest than a bug.

I cannot find any property in step-configuration that lets me manipulate the position of the step-element.
I would like to configure weather it is shown left, right, over or under the element it is anchored to.

this._tourService.initialize([ { anchorId: 'dashboard-centered', title: 'super cool title'), content: 'super cool content', route: '/dashboard' position: right } ])

or even better, have position be an object that contains additional values to position relative to anchor-element

As a workaround i currently read the height and width of the anchor-element and use it to manually position
.cdk-overlay-connected-position-bounding-box.

I love the library, thanks to everyone who contributed!

ngx-ui-tour-ng-bootstrap not blocking base web

When the tour starts on, using the ng-bootstrap it allows to click or do action with the site that should be blocked, it happen even if the enableBackdrop is on.

Screen.Recording.2021-04-15.at.10.48.18.AM.mov

Automatic page scroll on page resize

Current behavior

Page is not scrolling to focus on the currently highlighted element if the element is repositioned due to window resizing.

Expected behavior

If an element is repositioned due to window resizing and the element is focused by Ui Tour, the page should scroll to keep the focused element in the user view.

Thank you!

Is it possible to get the id/anchorId of the upcoming step before loading it?

I am trying to trigger an action (click a button) as soon as the user presses "Next" on the tour, in order to show elements that are hidden before reaching this step. There's an observable for when the step is shown, but not triggered, it seems. Is there a way for me to achieve this?
Awesome work on this by the way, it looks and feels amazing. :)

anchorId already registered! error

Hi,
it's possible add functionality to override or disable error in register function?

if (this.anchors[anchorId]) {
throw new Error('anchorId ' + anchorId + ' already registered!');
}

Support for ngx-popperjs

Hi,

Any plans to bring back support for popper.js based implementation using the ngx-popperjs library? It is upgraded to Angular 10.

isOptional not work correctly

When using isOptional for the last step - it does not work properly

isAsync: false,
isOptional: true

ERROR Error: Portals cannot be used without TuiPortalHostComponent

I keep running into this error with the TourUIDropdown.
Any help with what's wrong

Issue while implementing ngx-ui-tour-ngx-bootstrap with Angular 7

Facing issues while running the application after making all the changes.
I am using Angular 7 with ngx-ui-tour-ngx-bootstrap

ERROR in node_modules/ngx-ui-tour-core/lib/tour.service.d.ts(2,15): error TS2304: Cannot find name 'UrlSegment'.
node_modules/ngx-ui-tour-core/lib/tour.service.d.ts(2,28): error TS2304: Cannot find name 'from'.
node_modules/ngx-ui-tour-core/lib/tour.service.d.ts(10,22): error TS2304: Cannot find name 'UrlSegment'.
node_modules/ngx-ui-tour-ngx-bootstrap/lib/tour-anchor.directive.d.ts(2,15): error TS2304: Cannot find name 'OnDestroy'.
node_modules/ngx-ui-tour-ngx-bootstrap/lib/tour-anchor.directive.d.ts(2,15): error TS2695: Left side of comma operator is unused and has no
side effects.
node_modules/ngx-ui-tour-ngx-bootstrap/lib/tour-anchor.directive.d.ts(2,26): error TS2304: Cannot find name 'OnInit'.
node_modules/ngx-ui-tour-ngx-bootstrap/lib/tour-anchor.directive.d.ts(2,35): error TS2304: Cannot find name 'from'.
node_modules/ngx-ui-tour-ngx-bootstrap/lib/tour-anchor.directive.d.ts(10,65): error TS2304: Cannot find name 'OnInit'.
node_modules/ngx-ui-tour-ngx-bootstrap/lib/tour-anchor.directive.d.ts(10,73): error TS2304: Cannot find name 'OnDestroy'.

Error integration with CLI

Hi, I'm using angular cli 12 generated project. But I'm seeing an error:

ERROR in ./node_modules/ngx-ui-tour-core/fesm2020/ngx-ui-tour-core.mjs 7:0-69
Module not found: Error: Can't resolve 'rxjs/operators' in 'C:\Users\huangs8\workspace\cde\node_modules\ngx-ui-tour-core\fesm2020'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'rxjs/operators' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/ngx-ui-tour-md-menu/fesm2020/ngx-ui-tour-md-menu.mjs 3:0-39 4:0-135 18:30-41 109:12-39 135:49-62 147:45-58 152:349-371 159:238-260 166:40-67 198:16-35 199:16-27 209:8-18 215:8-18 218:12-22 223:11-21 235:24-34 239:24-34
 @ ./modules/_app/app.module.ts 41:0-69 66:16-41 87:16-27
 @ ./modules/_app/main.ts 3:0-44 15:41-53

Any idea where this error coming from?
Thanks!

Can you detect if a tour is already playing?

Hi, is there a way to determine whether a tour is already playing? Say for example I want to start another tour, but I don't want to do it while a current tour is playing as they overlap. How can I detect that a tour is already underway?

Disable Hotkeys for interactive steps with disabled next button

I have created a really nice guided tour with your library, thanks a lot.
I have some steps in my tour, which I call interactive steps. To progress in these steps the user has to click on highlighted UI Elements in order to progress in the guided tour. The Next button is hidden for these steps. It would be great if there were properties in the
IStepOption interface to disable certain hotkeys for a step. Right now the user can press the next button to progress without clicking on the UI Element.

Feature request: Use of positions ConnectedPosition[] within placement attribute

Library looks great, but I feel it lacks a bit of positioning options like the ones described here in https://material.angular.io/cdk/overlay/api#CdkConnectedOverlay

Would it be possible to have this in a future version?

Thanks!

Placing Tour Anchor inside MatDialog

When I place a Tour Anchor at the top of a component which gets displayed as a MatDialog, the position of the Anchor is wrong.
I applied placement: {xPosition: "before", yPosition: "above"}.
Is there any way to display the tour modal above the actual MatDialog?

Kind request to publish an Ivy distribution

I would like to kindly request a solution to this comment from the compiler:

Processing legacy "View Engine" libraries:
- ngx-ui-tour-core [es2015/esm2015] (https://github.com/hakimio/ngx-ui-tour.git)
- ngx-ui-tour-md-menu [es2015/esm2015] (https://github.com/hakimio/ngx-ui-tour.git)
- ngx-ui-tour-core [main/umd] (https://github.com/hakimio/ngx-ui-tour.git)
- ngx-ui-tour-md-menu [main/umd] (https://github.com/hakimio/ngx-ui-tour.git)
Encourage the library authors to publish an Ivy distribution.

I tried to do it myself but it looks like the code around the library (but not the library itself) depends too much on Taiga UI and I failed to update the project because of the dependencies.

Note I'm using the library in a project in Angular 13

Thank you in advance!

Angular 14: peer dependencies

Hi,

I've updated to Angular 14 and everything seems ok but I encountered a peer dependency issue in npm.

npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"^14.1.1" from the root project
npm ERR!   peer @angular/common@"^14.0.0 || ^15.0.0" from @angular/[email protected]
npm ERR!   node_modules/@angular/cdk
npm ERR!     @angular/cdk@"^14.1.1" from the root project
npm ERR!   6 more (@angular/forms, @angular/platform-browser, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@">=12.0.0 <14.0.0" from [email protected]
npm ERR! node_modules/ngx-ui-tour-core
npm ERR!   ngx-ui-tour-core@"^8.1.2" from the root project
npm ERR!   ngx-ui-tour-core@"8.1.2" from [email protected]
npm ERR!   node_modules/ngx-ui-tour-ngx-bootstrap
npm ERR!     ngx-ui-tour-ngx-bootstrap@"^8.1.2" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   peer @angular/common@">=12.0.0 <14.0.0" from [email protected]
npm ERR!   node_modules/ngx-ui-tour-core
npm ERR!     ngx-ui-tour-core@"^8.1.2" from the root project
npm ERR!     ngx-ui-tour-core@"8.1.2" from [email protected]
npm ERR!     node_modules/ngx-ui-tour-ngx-bootstrap
npm ERR!       ngx-ui-tour-ngx-bootstrap@"^8.1.2" from the root project```

In the ngx-ui-tour-core package,json, the peer dependencies require angular 12 or 13 :

```  "peerDependencies": {
    "@angular/common": ">=12.0.0 <14.0.0",
    "@angular/core": ">=12.0.0 <14.0.0",
    "@angular/router": ">=12.0.0 <14.0.0",
    "rxjs": ">=6.0.0",
    "typescript": ">=3.8.0"
  },

Could you update the dependencies to make the library full compatible with angular 14 ?

Thanks you.

Want to have backdrop on top of my other elements

It would be good to have the ability to configure z-index for the backdrop as it doesn't prevent interactions with elements that have z-index higher than 101.
For example element with .fixed-bottom class in bootstrap (z-index: 1030)

It would be good if z-index is either moved to css or it would be good to add some configuration settings for it.

Or maybe allow to extend/override backdrop service methods

Unable to import library

I tried installing this library following the instructions for both regular and lazy loaded modules, however I'm getting this error a bunch of times:

node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.

78     static ɵfac: i0.ɵɵFactoryDeclaration<TourService<any>, never>;

Note that I have required versions of dependecies:

"@angular/animations": "9.1.13",
"@angular/cdk": "9.2.4",
"@angular/common": "9.1.13",
"@angular/core": "9.1.13",
"@angular/material": "9.2.4",
"typescript": "3.8.3",
"ngx-ui-tour-core": "^7.0.1",
"ngx-ui-tour-md-menu": "^7.0.1",

I wonder if I cannot use latest version if I'm not using Angular 12, the description says supports Angular9+ but does it even in the latest version or just before support for Angular 10 is added?

Edit: Using 7+ will result in these errors, 6.1.0 seems fine.

Any help will be appreciated.

Step content not showing

Step content is not showing, only showing modal with title and blank body.
I am using [email protected]

Here is my code

// app.component.ts
this.tour.initialize([
  {
    anchorId: 'processor-create-batch',
    content: 'Create batch for the first time asdasdasdasdasdasdasdasd',
    title: 'Create Batch Ululu',
    route: '/job/home',
  },
  {
    anchorId: 'processor-receive-batch',
    content: 'For receiving batch from farmer',
    title: 'Receive Batch',
    route: '/job/home',
  },
]);
this.tour.start();

// app.modules.ts
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule,
    HttpClientModule,
    BrowserAnimationsModule,
    TourNgBootstrapModule.forRoot(),
  ],
  ...
})

The nextOnAnchorClick in step configuration is not working

According to the documentation on the page the property nextOnAnchorClick should enable/disable to go to the next step when the anchor is clicked. However it doesn't work for NGX-UI-TOUR-MD-MENU and even if it's turned on (true) it still does not allow to proceed to the next step. Wha's more when I create object of type IStepOption the property is unknown.

the second topic is that the placement property also is broken and doesn't work

Looking forward to fast resolution of these problems

Styling of the mat menu panel

Hi,

Right now I am using the html id mat-menu-panel-0 to style the div element that acts as the background of every tour step (This element is created by the mat-menu component). I cannot use the class mat-menu-panel as this would obviously style every other menu background panel.

I am wondering if teh id mat-menu-panel-0 is actually always unique to every step or if it would be possible to provide an additional custom class name/id to said element?

Async/await

Hello!

If I'm navigating to another route in a tour step, how can I await for the async ajax data to be loaded before showing up the tour-step-template? The result is the backdrop miscalculates the height of the element which is populated by a list of ajax data.

Could there be a delay or a callback option in order to await for something to complete before showing up the step?

Thanks in advance.

Great plugin!

Step with longer content overlaps anchor element

Hi!

First of all I would like to thank you for your great library!

I think I found a bug though. I have created a custom tour step template which can hold a picture and is generally designed to hold more content (like 2 - 3 sentences).

The problem is that the step kind of "hits" the bottom edge of the screen because of the longer content and thus does overlaps the anchor element instead of placing itself below it. I provided a screenshot which I hope will make my issue more clear.

If you need any more information please let me know.

Build error with ngx-ui-tour-md-menu - When triggering Angular build (v14) throwing error

After the update of 'ngx-ui-tour-md-menu' to v9.2.0 getting build error.

My project is on Angular 14.

"@angular/material": "^14.2.7",
"@angular/core": "^14.2.10",
"@angular/common": "^14.2.10",
"typescript": "^4.6.2"
"@angular/cdk": "^14.2.7",

and

"ngx-ui-tour-md-menu": "^9.2.0",

Find the screenshot of error below.

Next button throws error while passing custom template Throws Error Can't get next step. No currentStep.

app.component.html

{{step?.title}}

close

      <mat-card-content [innerHTML]="step?.content"></mat-card-content>

      <mat-card-actions align="end">
          <button
              mat-button
              class="prev"
              [disabled]="!tourService.hasPrev(step)"
              (click)="tourService.prev()"
          >
              <mat-icon>chevron_left</mat-icon> {{step?.prevBtnTitle}}
          </button>
          <button
              mat-button
              class="next"
              *ngIf="tourService.hasNext(step)"
              (click)="tourService.next()"
          >
              {{step?.nextBtnTitle}} <mat-icon>chevron_right</mat-icon>
          </button>
          <button
              mat-button
              (click)="tourService.end()"
              *ngIf="!tourService.hasNext(step)"
          >
              {{step?.endBtnTitle}}
          </button>
      </mat-card-actions>
  </mat-card>

sub module component
this.tourService.initialize([{
stepId:'1',
nextStep:1,
anchorId: 'app-home',
content: 'This is a step from the eager loaded app module in the home component',
title: 'Grid Component',
enableBackdrop:true,
endBtnTitle:'End',
nextBtnTitle: "Next",
prevBtnTitle: "Prev",
closeOnOutsideClick:true,
disablePageScrolling:true,
placement:{
xPosition: 'after',
yPosition: 'above'
},
route:'sdnc/list',
},
{
stepId:'2',
nextStep:2,
prevStep:1,
anchorId: 'app-display',
content: 'This is a step from the eager loaded app module in the home component',
title: 'Records',
enableBackdrop:true,
endBtnTitle:'End',
nextBtnTitle: "Next",
prevBtnTitle: "Prev",
closeOnOutsideClick:true,
disablePageScrolling:true,
route:'sdnc/list',
},
{
stepId:'3',
nextStep:3,
prevStep:2,
anchorId: 'add-button',
content: 'This is a step from the eager loaded app module in the home component',
title: 'Add Record',
enableBackdrop:true,
endBtnTitle:'End',
nextBtnTitle: "Next",
prevBtnTitle: "Prev",
closeOnOutsideClick:true,
disablePageScrolling:true,
route:'sdnc/list',
},

]);

setTimeout(() => {
this.tourService.events$.subscribe((x) => {
// if(x?.value?.stepId==='1'){
// this.tourService.currentStep=x.value;
// }
// console.log(this.tourService.currentStep,"this.tourService.currentStep");
console.log(x,"xxxxx");
if(x.name=="stepHide" && x.value.anchorId==='add-button'){
this.addNewEntryPopup()
}

});
this.tourService.startAt(0);

}, 2000);

Rxjs v6 build error after updating to v9.3.0

After the update of 'ngx-ui-tour-md-menu' to v9.3.0 getting build error.

My project is on Angular 14.

"@angular/material": "^14.2.7",
"@angular/core": "^14.2.10",
"@angular/common": "^14.2.10",
"typescript": "^4.6.2"
"@angular/cdk": "^14.2.7",

and

"ngx-ui-tour-md-menu": "^9.3.0",

Find the screenshot of error below.

does not work with typescript4.1

Why it doesn't work with typescript4.1?
The package: available Angular9+
But it doesn't work with Angular11/typescript4.1.6

Is is possible to initialize the TourService twice with different steps?

I have a initial tour starting when the user open the app for the first time which is working fine. Now I would like to show a second tour when the user access an specific route of my app.

What would be the recommended approach to implement the TourService.initialize with new steps is this scenario?
Should I initialize it first when the app starts and again when an specific app route is accessed and start the service again?

Passing tourAnchor to Ag-Grid column

I'm attempting to highlight a column in ag-grid. I think in general you should be able to pass a global angular attribute like tourAnchor to the grid's cellRenderer but no luck with this approach.

Has anyone used this library with ag-grid? Would appreciate hearing anyone's thoughts on this, thanks yall.

Step content is hidden when navigating to a route with parameters

Step content is hidden when navigating to a route with parameters. The backdrop is still there but the popover won't show

// app.component.ts
this.tour.initialize([
    {
        anchorId: 'dashboard',
        content: 'Dashboard sample content',
        route: '/dashboard',
    },
    {
        anchorId: 'omnisearch',
        content: 'Search for a zip code',
        route: '/zipcode/95001',
    },

]);
this.tour.start();

// app.routing.ts
const routes: Routes = [
    {
      path: 'dashboard',
      component: DashboardComponent,
    },
    {
      path: 'zipcode',
      children: [
        {
          path: '',
          component: ZipcodeLandingComponent,
          pathMatch: 'full'
        },
        {
          path: ':zipCode',
          component: ZipcodeReport,
        }
      ]
    },
  ];

ngx-ui-tour-core dependency

I was wondering if there is any good reason not to add ngx-ui-tour-core as a dependency in this project. This way you could install this with just one npm i --save command instead of 2.
I just ran into this issue when someone in our team accidentally only commited the ngx-ui-tour-md-menu entry in our package.json file. Obviously this was easily fixed, but it would still be nice if the core dependency is automatically installed by npm.

[ng-bootstrap] Tooltip doesn't show up when two consequent steps have the same anchor id

I have a wizard where I want the user to press the Next button a few times.
My 2 or more steps have the same tourAnchor. After 1st tooltip is shown - the next one will not pop up.

As example just add one more step in ng-bootstrap.component.ts to the tourSteps like:

     ...
     {
        anchorId: 'installation', // existing
        content: 'First, install the library...',
        title: 'Installation',
        route: 'ng-bootstrap/Setup'
    },
    {
        anchorId: 'installation', //new one
        content: 'Second tooltip info...',
        title: 'Installation 2nd tooltip',
        route: 'ng-bootstrap/Setup'
    },
   ...