Trigger callback function on stepNext() about ngx-tour HOT 3 CLOSED

@AlexCln what I did to solve this problem is have an anchor point off the screen. I would then use that anchor point as a transition step. So my step configuration was something like this:

[
    {
       stepId: 'firstStep'
       anchorId: 'some.anchor.id'
    },
    {
       stepId: 'toggleMenuRedirect'
       anchorId: 'offscreenAnchor'
    },
    {
        prevStep: 'firstStep',
        stepId: 'menuStep'
        anchorId: 'menu.anchor.id'
    }
]

then I would use the stepShow$ to detect when you are going to the toggleMenuRedirect step and then go to the next step:

this.tourService.stepShow$.subscribe( (step: IStepOption) => {
   switch (step.stepId){
       case "toggleMenuRedirect":
            this.myVariable = true;
            this.tourService.next();
       break;
  }
});

then on the stepHide$ callback of the menuStep step, you would set it back to false

this.tourService.stepHide$.subscribe( (step: IStepOption) => {
   switch (step.stepId){
       case "menuStep":
            this.myVariable = false;
       break;
  }
});

This is a bit of a workaround though. It would be nice @isaacplmann if there could be functions on the IStepOption object for onEnter and onLeave that would wait for the function to finish in the case of it returning a Promise or an Observable.

from ngx-tour.

Yes. The stepShow$ observable emits a value every time a new step is shown. So you can use it like this:

// step2 is defined up here somewhere
this.tourService.stepShow$.subscribe((step: IStepOption) => {
  if (step === step2) { // or step.anchorId === step2.anchorId
    this.myVariable = 'This is step 2!';
  }
});

Note: This code will execute any time step 2 is shown - so if you start the tour directly on step 2 or go from step 1 to 2 or from step 3 back to 2.

from ngx-tour.

Thanks for your answer, I've found a solution:

In app.component.ts :

this.tourService.stepShow$.subscribe( (res: any) => {
   switch (res.Step){
       case"2":
       this.myVariable = true;
       break;
       .... 
  }
});

and to close :

this.tourService.stepHide$.subscribe( (res: any) => {
   switch (res.Step){
       case"2": //for the same step
       this.myVariable = false;
       break;
       ....
  }
});

Now I got a position problem with the card because my toggleMenu is in position: absolute and the card is fixed to top: 0px; left: 0px

Regards

from ngx-tour.