Что такое data binding в Angular?

В чём суть

Data binding связывает модель компонента с шаблоном. В Angular четыре классические формы:

1. Interpolation — {{ expr }} (текст в DOM).
2. Property binding — [prop]="expr" (свойство элемента/дочернего компонента).
3. Event binding — (event)="handler($event)".
4. Two‑way — [(ngModel)] или пара [value] + (input) / model().

<img [src]="avatarUrl" [alt]="name" />
<button (click)="save()">Save</button>
<input [(ngModel)]="name" />
<p>Привет, {{ name }}</p>

@Component({
  standalone: true,
  imports: [FormsModule],
  template: `...`,
})
export class ProfileFormComponent {
  name = 'Ada';
  avatarUrl = '/a.png';
  save() { /* persist */ }
}

Важно не путать

• [disabled]="isOff" — property binding; строковая интерполяция атрибута часто даёт неверный тип.
• (click) — DOM‑событие; @Output — событие дочернего компонента.
• Signals в шаблоне читаются как count() — тоже привязка к состоянию.
• Attribute binding [attr.aria-label] нужен, когда нет DOM‑property.

Хороший ответ на собеседовании — не только список синтаксисов, но и направление потока данных в каждом случае.

Итог

Binding — мост «класс ↔ шаблон». Различайте направление: в шаблон (property/interpolation), из шаблона (event), в обе стороны (two‑way).