Angular 5 EventEmitter from child to parent component emits undefined

Question

I am trying to send a string from a child component to his parent component.

Here is the child :

//imports... 

    @Component({
    s         


        

Answer 1

You missed $ prefix of the event. $event is a reserved word, so your data is visible to the event handler in the component markup only with name $event.

<d-table (sendDataEvent)="receiveBusinessCycle($event)"></d-table>

Answer 2

You should be using $event here:

<d-table (sendDataEvent)="receiveBusinessCycle($event)"></d-table>

I've faced a similar situation before and apparently, it seems to only work with $event as it is a reserved keyword to grab the event object.

Apparent, Angular provides a corresponding DOM event object in the $event only. That's why passing in any other variable as an argument won't work. You can read more about it here.

Angular also considers this as a dubious practice when working with native HTML Elements as it breaks the separation of concerns between the template and the component. Angular recommends the use of Template Variables instead. Read more about it here.