angular-shepherd: Custom action on button not working

So I just get started using Shepherd on my Angular 8 project, unfortunately, I can’t do any custom actions inside my buttons.

builtInButtons = {
    complete: {
      classes: "finish-button",
      secondary: false,
      text: "Ok",
      type: "cancel",
      action() {
        console.log('finishing my tour')
      },
    },
    next: {
      classes: "next-button",
      text: "Next",
      type: "next"
    },
    back: {
      classes: "back-button",
      secondary: true,
      text: "Back",
      type: "back"
    }
  };

console.log() doesn’t happen, and I can’t see why. Basically what I’m seeking is a way to router.navigate when the user finishes the current tour by clicking or advancing via keyboard.

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 2
Comments: 15 (5 by maintainers)

Most upvoted comments

Ok, apparently you can’t have a type and an action on the same button. Removing the type “cancel” solved it. I don’t know if this is intended, maybe we need this in the docs.

raframil on Feb 17, 2020

@yc-98 it’s a scoping issue. this inside the action points to the tour.

Try this:
buttons: [
  {
    classes: 'shepherd-button-secondary',
    text: 'My action',
    action: () => {
      this.router.navigateByUrl(['/profile'])
    }
  }
]

@rwwagner90 You are absolutely right, worked like a charm - got a headache from figuring out a way to access service-scoped variables inside the button action - and this is exactly how you do it. Thank you!

MatZil on Jun 9, 2022

@yc-98 it’s a scoping issue. this inside the action points to the tour.

Try this:

buttons: [
  {
    classes: 'shepherd-button-secondary',
    text: 'My action',
    action: () => {
      this.router.navigateByUrl(['/profile'])
    }
  }
]

As a last resort, you could define a variable for the router.


const router = this.router;

// Setup shepherd stuff here

 action() {
   router.navigateByUrl(['/profile'])
 }

Does this make sense?

RobbieTheWagner on Apr 25, 2022

Yes, it does seem we do not document the button types well. Would you be interested in opening a PR?

RobbieTheWagner on Feb 18, 2020