angularangular-materialangular-event-emitter

How to correctly emit an event that takes data from a form to the parent component in Angular

On a value change in the form in the child component I am trying to send an event to the parent component with the changed data from the form, but it keeps telling me that the

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

export class ClaimItemBoxesComponent implements OnInit {
 @Output() updatedBoxData = new EventEmitter();
 ngOnInit(): void {
    this.items.valueChanges.subscribe(this.onBoxFormChage);
 }
 onBoxFormChage(item) {
   this.updatedBoxData.emit(item) // Cannot read properties of undefined (reading 'updatedBoxData')
 }
}

If I emit the event inside ngOnInit outside the subscribe, it works like it should, but if inside the subscribe it does not.

Solution

  • You have lost the context here, just bind it, or use lambda function:

    ngOnInit(): void {
    this.items.valueChanges.subscribe(this.onBoxFormChage.bind(this));
}

    or

    ngOnInit(): void {
    this.items.valueChanges.subscribe((value) => this.onBoxFormChage(value));
}