I'm currently diving into Angular, specifically working with version 12.0.1 and TypeScript 4.3.4. I'm stumped as to why my event emitter is showing up as undefined. Any suggestions or insights?
Here's the error message that keeps popping up: ERROR TypeError: this.gameClick is undefined
.ts file:
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-game-control',
templateUrl: './game-control.component.html',
styleUrls: ['./game-control.component.scss']
})
export class GameControlComponent implements OnInit {
gameInterval: number = 0;
score: number = 0;
@Output() gameClick: EventEmitter<any> = new EventEmitter<{ clicks: number }>();
constructor() { }
ngOnInit(): void {
}
emitEvent() {
this.gameClick.emit({ clicks: this.score });
this.score++;
}
startGame() {
this.gameInterval = setInterval(this.emitEvent, 1000);
}
stopGame() {
clearInterval(this.gameInterval);
}
}
html file:
<div class="controls">
<button
class="btn-game"
(click)="startGame()"
>Start game</button>
<button
class="btn-game"
(click)="stopGame()"
>Stop game</button>
</div>