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

В Angular передача данных между компонентами реализуется несколькими способами:

• @Input() — позволяет передавать данные от родительского компонента к дочернему. Родитель связывает значение с входным свойством дочернего компонента.

@Component({ selector: 'child-comp', template: `{{data}}` })
export class ChildComponent {
  @Input() data!: string;
}

@Component({ selector: 'parent-comp', template: `<child-comp [data]="parentData"></child-comp>` })
export class ParentComponent {
  parentData = 'Привет из родителя';
}

• Двустороннее связывание (Two-way binding) — обычно реализуется через синтаксис [(ngModel)], который связывает значение и событие изменения. Используется для синхронизации данных между UI и моделью.

<input [(ngModel)]="username" />
<p>Привет, {{username}}!</p>

• Сигналы — новая реактивная концепция в Angular, позволяющая создавать реактивные источники данных, которые автоматически обновляют UI при изменении. Сигналы упрощают управление состоянием и передачу данных без необходимости использовать сложные RxJS потоки.

import { signal } from '@angular/core';

const count = signal(0);

count.set(count() + 1); // обновит все подписанные компоненты

Таким образом, для передачи данных от родителя к ребенку используется @Input, для двусторонней синхронизации — ngModel, а сигналы помогают создавать реактивные и эффективные связи данных внутри приложения.