0

I have the following structure of my file (ionic app with angular)

export class NewGamePage implements OnInit {
   [...]
   async addPlayerToGame(userToAdd: User, playerNumber: number) {[...]}

   defineAndStartIntro() {
      const intro: IntroJs = introJs(document.querySelector('app-new-game')).setOptions({
      steps: [{
        element: document.querySelector('.step1'),
        title: 'Welcome ',
        intro: 'text!',
        tooltipClass: 'customTooltip',
        myBeforeChangeFunction() {
            [defining guest]
            this.addPlayerToGame(guest, 2);
        },
      },
      });
      intro.onbeforechange(function () {
      if (this._introItems[this._currentStep].myBeforeChangeFunction) {
        this._introItems[this._currentStep].myBeforeChangeFunction();
      }
     });
     intro.start();
  }
}

When I run it, it says that addPlayerToGame is not a function, so it seems like because it's a callback of the event it cannot access the other class methods. I am able to call this method in other places without an issue.

solaire
  • 437
  • 5
  • 18
  • 1
    You can make `myBeforeChangeFunction` an arrow function to use the `this` from the surrounding scope: `myBeforeChangeFunction: () => {...}` – Nick Parsons Jul 17 '21 at 14:09

0 Answers0