Что такое декораторы `@Input` и `@Output`?

Что важно понять

Это базовый контракт родитель ↔ ребёнок: данные вниз, события вверх. Без него не объясняют компонентную модель Angular.

Модель

• @Input / input() — свойства, которые родитель биндит: [userId]="id".
• @Output / output() — поток событий наружу: (saved)="onSave($event)".

import { Component, input, output } from '@angular/core';

@Component({
  selector: 'app-like',
  template: `<button type="button" (click)="liked.emit(id())">♥</button>`,
})
export class LikeComponent {
  id = input.required<string>();
  liked = output<string>();
}

<app-like [id]="userId" (liked)="onLike($event)" />

Современный стиль — signal inputs (input(), input.required(), transform) и output(). Декораторы @Input/@Output + EventEmitter всё ещё везде в легаси и валидны. Двусторонний сахар [()] строится из input + output с суффиксом Change.

Когда этого мало

Глубокий prop drilling (5+ уровней) лучше заменить сервисом с signal, router state или store. Input/Output идеальны для явной границы одного уровня.

Итог

Input = props вниз; Output = события вверх. Знайте и декораторы, и signal-based API — на собесе спрашивают оба поколения.