Как передавать данные между компонентами в Angular: Input, Output и signal inputs?

`@Input` передаёт данные от родителя к ребёнку, `@Output` с EventEmitter — события от ребёнка к родителю.

Классический вариант

@Component({ selector: 'app-counter', template: `
  <button (click)="inc()">{{ value }}</button>` })
export class CounterComponent {
  @Input() value = 0;
  @Output() valueChange = new EventEmitter<number>();

  inc() { this.valueChange.emit(this.value + 1); }
}

// родитель
// <app-counter [value]="count" (valueChange)="count = $event" />
// двусторонняя запись: <app-counter [(value)]="count" />

Signal-based API (Angular 17+)

export class CounterComponent {
  value = input(0);              // сигнал только для чтения
  step = input.required<number>();
  valueChange = output<number>();
  model = model(0);              // двусторонняя связь
}

Входы-сигналы реактивны: их используют в computed и effect без ngOnChanges.

Правила

Входные данные не изменяют внутри ребёнка: изменение отправляют наверх событием.

Коротко для собеседования

Данные вниз через @Input или input(), события вверх через @Output или output(). Для двусторонней связи есть [(...)] и model().