How do @Input and @Output enable component communication?

Question

Accepted Answer

`@Input` and `@Output` are the standard way a parent and child component communicate: **`@Input`** passes data *down* (parent → child), and **`@Output`** sends events *up* (child → parent). This mirrors the universal "props down, events up" pattern. ## @Input — data flows down ```ts // child: UserCardComponent import { Component, Input } from "@angular/core"; @Component({ selector: "app-user-card", template: `

` }) export class UserCardComponent { @Input() user!: User; // receives data from the parent @Input() showEmail = false; // with a default } ``` ```html ``` ## @Output — events flow up ```ts // child emits an event the parent can listen to import { Component, Output, EventEmitter } from "@angular/core"; @Component({ selector: "app-user-card", template: ``, }) export class UserCardComponent { @Output() deleted = new EventEmitter(); // declares an output event onDelete() { this.deleted.emit(this.user.id); // emit with a payload } } ``` ```html ``` The child emits through an `EventEmitter`; the parent binds to it with `(eventName)` and receives the payload as `$event`. The child never modifies the parent's data directly — it *requests* action by emitting. ## The complete pattern ```text Parent ──[user]──────────────→ Child (@Input: data down) Parent ←──(deleted)=removeUser─ Child (@Output: events up) ``` ## Modern signal inputs ```ts name = input(); // signal-based @Input (newer Angular) deleted = output(); // signal-based @Output ``` Recent Angular adds signal-based `input()`/`output()` functions as an alternative. ## Why it matters `@Input`/`@Output` are the core of parent-child communication and reusable components in Angular — they enforce one-way data flow (down via inputs, up via events) that keeps data predictable and components decoupled. Understanding this pair is essential for composing any non-trivial Angular UI; for communication between unrelated components, you'd instead use a shared service or state library.