How to emit events from child to parent in Angular
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Emitting events from child to parent components is essential for building interactive Angular applications with proper component communication.
As the creator of CoreUI, a widely used open-source UI library, I’ve implemented countless event-driven component interactions over 25 years of development.
From my expertise, the most reliable approach is to use the @Output decorator with EventEmitter to create custom events that parent components can listen to.
This pattern maintains loose coupling while enabling effective component communication.
Use @Output decorator with EventEmitter to emit events from child components.
// child.component.ts
@Output() buttonClick = new EventEmitter<string>()
onClick() {
this.buttonClick.emit('Button was clicked!')
}
Here the @Output decorator creates a custom event called buttonClick using EventEmitter. When the onClick method is called, it emits the event with a string payload using emit(). The parent component can listen to this event in its template with (buttonClick)="handleEvent($event)" to receive the emitted data and respond accordingly.
Best Practice Note:
This is the same event communication pattern we use in CoreUI Angular components for reliable parent-child interaction. Always type your EventEmitter with the data type you’re emitting, and use descriptive event names that clearly indicate what action triggered the event.
