0

so I have this code - 

@Component({
  tag: "app-home",
  styleUrl: "app-home.css"
})
export class AppHome {
  @Event()
  myEvent: EventEmitter;

  callEv() {
    this.myEvent.emit("hello");
  }

  render() {
    return (
      <div class="app-home">
        <button onClick={this.callEv}>Hello</button>
      </div>
    );
  }
}

When the button is clicked, I get this error in the console -

Uncaught TypeError: Cannot read property 'emit' of undefined
    at HTMLButtonElement.callEv

Any idea why?

sanatgersappa
  • 4,319
  • 2
  • 18
  • 13

1 Answers1

4

Inside the callEv method, you use the this keyword to call the event emitter service. But inside the template, the context is different and therefore this does not contain the event emitter service, which causes your error.

What you need to do is to bind the current context to the method. Add this to your class:

constructor() {
    this.callEv = this.callEv.bind(this);
}
JSON Derulo
  • 9,780
  • 7
  • 39
  • 56