How to Pass data from child to parent component Angular How to Pass data from child to parent component Angular angular angular

How to Pass data from child to parent component Angular


Register the EventEmitter in your child component as the @Output:

@Output() onDatePicked = new EventEmitter<any>();

Emit value on click:

public pickDate(date: any): void {    this.onDatePicked.emit(date);}

Listen for the events in your parent component's template:

<div>    <calendar (onDatePicked)="doSomething($event)"></calendar></div>

and in the parent component:

public doSomething(date: any):void {    console.log('Picked date: ', date);}

It's also well explained in the official docs: Component interaction.


In order to send data from child component create property decorated with output() in child component and in the parent listen to the created event. Emit this event with new values in the payload when ever it needed.

@Output() public eventName:EventEmitter = new EventEmitter();

to emit this event:

this.eventName.emit(payloadDataObject);


Most of new version If give some error replace this Line

@Output() parentComponent = new EventEmitter();

Almost it will be solve your error