Расскажите про передачу данных между компонентами в Angular (Input, двустороннее связывание, сигналы).

Основные способы передачи данных

В Angular компоненты общаются через иерархию: родитель передает данные вниз через @Input(), а дочерний сообщает о событиях через @Output() с EventEmitter. Это однонаправленный поток данных, который упрощает отладку и предсказуемость.

Для двустороннего связывания используется синтаксис [(ngModel)] (в формах) или комбинация [value] и (valueChange). Однако с появлением сигналов в Angular 16+ появился более чистый способ: сигналы позволяют создавать реактивные значения, которые автоматически обновляют представление.

Пример с Input и Output

// child.component.ts
@Component({...})
export class ChildComponent {
  @Input() count = 0;
  @Output() countChange = new EventEmitter<number>();

  increment() {
    this.count++;
    this.countChange.emit(this.count);
  }
}

// parent.component.html
<app-child [count]="parentCount" (countChange)="parentCount = $event"></app-child>

Двустороннее связывание

Синтаксис [(ngModel)] — это сахар над [ngModel] и (ngModelChange). Он удобен для форм, но для произвольных компонентов лучше явно использовать Input/Output.

Сигналы

Сигналы — это реактивные примитивы, которые отслеживают зависимости и обновляют только те части шаблона, которые зависят от измененного сигнала. Пример:

// counter.component.ts
import { signal, computed } from '@angular/core';

@Component({...})
export class CounterComponent {
  count = signal(0);
  double = computed(() => this.count() * 2);

  increment() {
    this.count.update(c => c + 1);
  }
}

В шаблоне сигналы вызываются как функции: {{ count() }}. Это позволяет избежать zone.js и улучшает производительность.

Вывод

Для простых случаев используйте @Input()/@Output(). Для форм — [(ngModel)]. Для сложных реактивных состояний и оптимизации — сигналы. Сигналы становятся стандартом в новых версиях Angular, поэтому их стоит изучать и применять в новых проектах.