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 enables upward communication in Angular’s component hierarchy using the @Output decorator and EventEmitter. As the creator of CoreUI, a widely used open-source UI library, I’ve implemented event emission in countless Angular components for form interactions and user actions. From my expertise, the most effective approach is using @Output with EventEmitter to create custom events that parent components can listen to. This method provides clean component APIs and maintains proper data flow patterns in Angular applications.
Use @Output() decorator with EventEmitter to emit custom events from child components.
// child.component.ts
import { Component, Output, EventEmitter } from '@angular/core'
@Component({
selector: 'app-child',
template: `
<button (click)="sendMessage()" class="btn btn-primary">
Send Message
</button>
<input [(ngModel)]="inputValue" (keyup.enter)="sendData()">
`
})
export class ChildComponent {
@Output() messageEvent = new EventEmitter<string>()
@Output() dataEvent = new EventEmitter<any>()
inputValue = ''
sendMessage() {
this.messageEvent.emit('Hello from child!')
}
sendData() {
this.dataEvent.emit({ value: this.inputValue, timestamp: new Date() })
}
}
// parent.component.ts
@Component({
template: `
<app-child
(messageEvent)="handleMessage($event)"
(dataEvent)="handleData($event)">
</app-child>
`
})
export class ParentComponent {
handleMessage(message: string) {
console.log('Received:', message)
}
handleData(data: any) {
console.log('Data:', data)
}
}
The @Output() decorator creates custom events that parent components can bind to using event binding syntax. EventEmitter’s emit() method sends data to the parent component. Parent components listen for these events using the event binding syntax (eventName)="handler()".
Best Practice Note:
This is the same event emission pattern we use in CoreUI Angular components for user interactions. Use descriptive event names and strongly typed EventEmitter generics for better developer experience.
