Angular 2 this.generateTree is not a function

Question

I have 2 functions in my component. onElementClick is binded to element in HTML. So every time I click on that element, I get:

this.showHalo is not a function

Why is this a case?

showHalo(view, opt) {
  // Code
}

 onElementClick(view) {
 // Code
  function click() {
    this.showHalo(view, { animation: true });
  }
}

I even tried this, but its the same thing.

myFunc(){
   console.log("TEST");
}

onElementClick(view) {
   self = this;
   self.myFunc();
}

You should read this: http://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback/20279485#20279485 your `this` is not refering to your component inside that functions scope. — eko, Apr 07 '17 at 08:36
In your updated question section, you don't even need to preserve `this`, it should work like simple call `myFunc()` — anoop, Apr 07 '17 at 09:56

score 0 · Answer 1 · answered Apr 07 '17 at 08:37

0

Correct your this pointer. Like :

showHalo(view, opt) {
  // Code
}

 onElementClick(view) {
 // Code
var _this = this;
  function click() {
    _this.showHalo(view, { animation: true });
  }
}

answered Apr 07 '17 at 08:37

anoop

3,812
2
16
28

@masterfan : In your updated question section, you don't even need to preserve `this`, it should work like simple call `myFunc()` – anoop Apr 07 '17 at 09:56

score 0 · Answer 2 · answered Apr 07 '17 at 08:52

0

this object will not be available in local function scope. You need to assign this to local scope variable and use it in click function.

  showHalo() {
  console.log('hihih')
  }

  onElementClick() {
    console.log('2323');
    var self = this;
    click();
    function click(){
      self.showHalo();
    }

answered Apr 07 '17 at 08:52

Pramod Patil

2,704
2
14
20

That should not be the pbm..Have you tried above code? – Pramod Patil Apr 07 '17 at 09:00
Share HTML part too from where you are calling onElementClick function – Pramod Patil Apr 07 '17 at 10:04

Angular 2 this.generateTree is not a function

2 Answers2