When emitting an event multiple times in Angular, an error may occur where properties of undefined are unable to be read, particularly in relation to the "

Question

When emitting an event multiple times in Angular, an error may occur where properties of undefined are unable to be read, particularly in relation to the "

I am encountering an issue with my event binding on a button, specifically (click)="onStart()". The problem arises when the event this.numEmitter is emitted for the first time in setInterval, after which I receive the error message

ERROR TypeError: Cannot read properties of undefined (reading 'emit')

    incNum: number;
    timer: number;
    @Output() numEmitter: EventEmitter<number> = new EventEmitter();

    constructor() {
        this.timer = -1;
        this.incNum = 0;
    }

    
    onStart() {
        this.timer = window.setInterval(function () {
            this.incNum++;
            this.numEmitter.emit(this.incNum);
        }, 1000);
    }

    onStop() {
        window.clearInterval(this.timer);
    }

I would greatly appreciate it if someone could help me identify and resolve this issue.

angular typescript angular-decorator

Answer 1

Answer №1

The issue lies in the handler you provided not capturing the correct this. To fix this, consider using an arrow function instead:

onStart() {
  this.timer = window.setInterval(() => {
    this.incNum++;
    this.numEmitter.emit(this.incNum);
  }, 1000);
}

onStop() {
  window.clearInterval(this.timer);
}

Answer 2

The issue lies in the handler you provided not capturing the correct this. To fix this, consider using an arrow function instead:

onStart() {
  this.timer = window.setInterval(() => {
    this.incNum++;
    this.numEmitter.emit(this.incNum);
  }, 1000);
}

onStop() {
  window.clearInterval(this.timer);
}

When emitting an event multiple times in Angular, an error may occur where properties of undefined are unable to be read, particularly in relation to the "

Answer №1

Similar questions

Implementing Generic Redux Actions in Typescript with Iterable Types

What is the best way to connect an event in Angular 2?

Angular is not providing the anticipated outcome

Error: Unable to inject HttpClient dependency. Angular 5

Combining type inference validation and authentication middleware in Express routes can be a powerful way to enhance security and ensure

Angular 6 - Receiving @Input causes output to multiply by 4 instead of displaying just once

angular typescript does not support receiving a value in foreach loop

Limiting the Size of Highcharts Maps with maxWidth or maxHeight

Angular and RxJS work together to repeat actions even when an HTTP request is only partially successful

Customize the position values of the Ngx-bootstrap Tooltip manually

Is there a way to adjust this angular2 service to make it slightly more synchronous?

Create a PDF document utilizing Angular Ignite UI for Angular

How to incorporate scope into the Transloco Translation API?

Rxjs error: The 'pipe' property is not found on the 'UnaryFunction<Observable<{}>, Observable<string | {}>>' type

Tips for managing table scroll in a flexbox design

Creating components with the viewContainerRef in Angular2 is functioning as expected

Error occurs in Angular Mat Table when attempting to display the same column twice, resulting in the message "Duplicate column definition name provided" being

Comparing Angular i18n JSON files automatically for consistency checks

Solving the issue where the argument type is not assignable to the parameter type

Is Angular Signals on track to potentially supplant NgRx in some aspects?