angular: EventEmitter is undefined in embedded component

Question

I'm learning angular and I have a problem: I have a component inside the main component and I want to emit an event, but I'm getting an error. Here is my code:

import { Component,  OnInit, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-game-control',
  templateUrl: './game-control.component.html',
  styleUrls: ['./game-control.component.css']
})
export class GameControlComponent implements OnInit {
  @Output() numberGenerated: EventEmitter<{v: number}> = new EventEmitter<{v: number}>();
  game: any;

  constructor() { }

  ngOnInit() {
  }

  startGame() {
    this.game = setInterval(this.generateEvent, 1000);
  }

  stopGame() {
    clearInterval(this.game);
  }

  generateEvent(): void {
    const n = Math.floor((Math.random() * 10) + 1);
    this.numberGenerated.emit({v: 3});
    console.log('event sent');
  }
}

this is the html code for this component:

start game end game

and here is the app-rootcomponent html:

<div>
    <app-game-control (numberGenerated)="numberGeneratedEvent($event)">
    </app-game-control>
    <hr>
    <br>
</div>

but when I click the button "start game", I'm getting the error from the attached image:

Note that this is a window and not a component. What I'm doing wrong?

score 6 · Accepted Answer · answered Jul 15 '18 at 01:10

6

Try this instead:

this.game = setInterval(() => this.generateEvent(), 1000);

That might seem like an unnecessary extra layer of function calling, but it's important for the way the this context is maintained.

answered Jul 15 '18 at 01:10

kshetline

12,547
4
37
73

The function pointer you pass as `this.generateEvent` doesn't carry the context of the particular instance of your class `GameControlComponent`. When the function gets called that way, the `this` inside the context of the function isn't properly defined. – kshetline Jul 15 '18 at 01:17
By the way, did my suggestion fix the problem? – kshetline Jul 15 '18 at 01:17
it fixed the problem, but without understanding why. Now I understant why. Thanks – Buda Gavril Jul 15 '18 at 01:19
No worries. Didn't think it was you. :) – kshetline Jul 15 '18 at 01:41

angular: EventEmitter is undefined in embedded component

1 Answers1