Emitting an array using EventEmitter showing undefined

Question

I'm trying to emit an array to a parent component, however I keep getting undefined when I try with console.log for the emitted data, my other event emitter is working fine, Event two is emitting the array but when output in the console gives me undefined(only code that's necessary is shown).

child component ts file:

@Output() eventTwo: EventEmitter<any> = new EventEmitter<any>();

// the emitting function (fillArray is the array I'm trying to send)

  sendNo () {
   this.event.emit({columns: this.height, rows: this.width});
   this.eventTwo.emit(this.fillArray);
 }

child component html file:

<label>Width: </label><input type="number" [(ngModel)]="height" 
(ngModelChange)="sendNo()" (ngModelChange) = "getRnd()">
<p></p>
<label>Height: </label><input type="number" [(ngModel)]="width" 
(ngModelChange)="sendNo()" (ngModelChange) = "getRnd()" >
<p></p>

parent component html file:

<app-inputs (event)="getDataFromChild($event)" 
(eventTwo)="getDataFromChildTwo($eventTwo)"></app-inputs>

parent component ts file:

    getDataFromChildTwo(data) {
  this.randVal = data;
  console.log(this.randVal);
 }

In your parent.component.html should be $event not $eventTwo like this: <app-inputs (event)="getDataFromChild($event)" (eventTwo)="getDataFromChildTwo($event)"></app-inputs> — Sanoj_V
I see, I assumed the parameter had to have the same name as the event name. Many thanks, feel free to write a solution! — user9623870

Sangwin Gawande Sangwin Gawande · Accepted Answer · 2018-05-14T10:23:37

Please change the parent component code like this :

<app-inputs (event)="getDataFromChild($event)" 
(eventTwo)="getDataFromChildTwo($event)"></app-inputs>

The emitted event should be $event and not $eventTwo.

Emitting an array using EventEmitter showing undefined

1 Answers