Component Communication with @Output (Child to Parent)

Use `@Output` when a child needs to notify its parent, like “button clicked” or “user selected.” ## Step 1: Child component emits event ```ts import { Component, EventEmitter, Output } from '@angular/core'; @Component({ selector: 'app-like-button', standalone: true, template: `<button (click)="like()">👍 Like</button>`, }) export class LikeButtonComponent { @Output() liked = new EventEmitter<number>(); private count = 0; like() { this.count++; this.liked.emit(this.count); } } ``` ## Step 2: Parent listens to event ```html <app-like-button (liked)="onLiked($event)"></app-like-button> <p>Total likes: {{ likes }}</p> ``` ```ts export class PostComponent { likes = 0; onLiked(newCount: number) { this.likes = newCount; } } ``` ## Mental model Parent passes data down with `@Input`. Child sends events up with `@Output`. > Next: Services and dependency injection, the real backbone of Angular apps.