TypeError: this is not a function at IntroJs._introExitCallback

Question

I'm trying to pass a div to showOff on intro.onexit() but I am getting this error.

TypeError: this.hideStep is not a function
    at IntroJs._introExitCallback (http://localhost:8100/build/main.js:511:18)
    at IntroJs._exitIntro (http://localhost:8100/build/vendor.js:120298:31)
    at HTMLDivElement.overlayLayer.onclick [as __zone_symbol__ON_PROPERTYclick] (http://localhost:8100/build/vendor.js:121508:20)
    at HTMLDivElement.H (http://localhost:8100/build/polyfills.js:3:23950)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15660)
    at Object.onInvokeTask (http://localhost:8100/build/vendor.js:5125:33)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15581)
    at r.runTask (http://localhost:8100/build/polyfills.js:3:10834)
    at e.invokeTask [as invoke] (http://localhost:8100/build/polyfills.js:3:16794)
    at p (http://localhost:8100/build/polyfills.js:2:27648)

I also got this error trying to pass the menuCtrl.close() with this.menuCtrl.close() I had to declare it into he function intro() get it work. I am thinking that, that was because I am calling a function of a component, so I actually will have to create a component to pass false into ?

I am kind of Lost right now, I'm learning, maybe I have the wrong definitions.

This is my code

public step1 = true;

 hideStep(){
    this.step1 = false; 
  }

intro() {
    let intro = introJs.introJs();
    let menuCtrl = this.menuCtrl;

    intro.setOptions({
    steps: [
      {
        intro: "Hello!! we want to give you some recommendations"
      },
      {
        element: '#step1',
        intro: "You can see the profile settings, just tapping in your profile picture",
        position: 'bottom'

      },
      {
        element: '#step2',
        intro: "You can see the profile settings, just tapping in your profile picture",
        position: 'bottom'  
      }
    ]
    });

    intro.start();
    intro.onexit(function() {
      menuCtrl.close();
      this.hideStep();
    });
  }

  ngAfterViewInit(): void {
    this.intro();
  }

Haifeng Zhang Haifeng Zhang · Accepted Answer · 2018-06-07T16:14:47

Try use fat arrow function instead of method funtion, it is the this keyword issue:

intro.onexit(() => {
    menuCtrl.close();
    this.hideStep();
});

The this keyword of method function refers to the owner of the function it is in

TypeError: this is not a function at IntroJs._introExitCallback

1 Answers