easyFrontend

How do child components emit events to parents?

Q: How do child components emit events to parents?

**Core concept.** A child exposes an @Output() property of type EventEmitter , and calls this.event.emit(value) to notify the parent. The parent binds to it like a DOM event — (childEvent)="handler($event)" . This is the "data up" channel that complements "data down" via @Input . (Modern Angular also offers the output() function.) Child @Output emit(value) <line class='d-edge-accent' x1='180' y1='75' x2='278' y2='75' marker-end='url(#ah-op)'/

362 views

Understand the problem

Explain @Output and EventEmitter.

outputeventemitter

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Child @Output → parent handler

import { Component, Output, EventEmitter, Input } from '@angular/core';

@Component({
  selector: 'app-likes',
  standalone: true,
  template: '<button (click)="like()">👍 {{ count }}</button>',
})
export class LikesComponent {
  @Input() count = 0;
  @Output() liked = new EventEmitter<number>();   // event channel up
  like() { this.liked.emit(++this.count); }
}

// Parent:  <app-likes [count]="0" (liked)="onLiked($event)"></app-likes>

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What is the purpose of ngOnChanges and how does it capture changes in @Input properties?

What does the Angular CLI provide?