Ответ
Data Binding в Angular — это механизм синхронизации данных между компонентом и шаблоном. Есть 4 типа:
- Интерполяция
{{value}}— одностороннее связывание из компонента в шаблон - Property binding
[property]="value"— привязка свойства DOM к данным компонента - Event binding
(event)="handler()"— реакция на события DOM - Two-way binding
[(ngModel)]="property"— синхронизация в обе стороны
Пример:
<!-- Интерполяция -->
<p>{{ title }}</p>
<!-- Property binding -->
<img [src]="imageUrl">
<!-- Event binding -->
<button (click)="onClick()">Click</button>
<!-- Two-way binding -->
<input [(ngModel)]="username">Two-way binding требует FormsModule. Data Binding упрощает работу с DOM, автоматически обновляя представление при изменении данных.
Ответ 18+ 🔞
А, ну это же про Angular и его data binding! Слушай, это как раз та хуйня, которая избавляет тебя от ручного ковыряния в DOM, будто ты в 2008 году на jQuery пишешь. В общем, есть четыре основных способа, как данные между твоим компонентом и шаблоном болтаются.
Первое — интерполяция. Это когда ты в шаблоне пишешь {{ value }}. Выглядит, как будто просто вставил переменную, а на самом деле это односторонняя связь из компонента в шаблон. Меняешь value в коде — на странице автоматом обновляется. Красота, а не жизнь.
Второе — property binding. Вот это уже мощнее: [src]="imageUrl". Ты берёшь свойство какого-нибудь HTML-элемента (тот же src у картинки) и привязываешь его к своему полю в компоненте. Данные текут в одну сторону — из компонента в DOM. Попробуй в обратную — нихуя не выйдет.
Третье — event binding. А это уже реакция на действия пользователя. (click)="onClick()". Кликнули по кнопке — вызвался твой метод. Всё просто, как три копейки. Никаких addEventListener, за тебя всё Angular делает, ленивая жопа.
И четвёртое, коронный номер — two-way binding. [(ngModel)]="username". Вот эта штука — магия, ёпта! Меняешь значение в инпуте — автоматом меняется свойство в компоненте. Меняешь свойство в компоненте — автоматом обновляется инпут. Синхронизация в обе стороны, как будто у них телепатия. Но внимание, ёпта! Чтобы это работало, надо импортировать FormsModule, иначе получишь ошибку, которая заставит тебя чувствовать себя полным мудаком.
Вот тебе живой пример, чтоб вообще всё стало ясно, как божий день:
<!-- Интерполяция — просто выводим заголовок -->
<p>{{ title }}</p>
<!-- Property binding — подставляем ссылку на картинку -->
<img [src]="imageUrl">
<!-- Event binding — вешаем обработчик на клик -->
<button (click)="onClick()">Жми сюда, не ссы</button>
<!-- Two-way binding — волшебная синхронизация инпута и переменной -->
<input [(ngModel)]="username">Короче, вся эта система data binding в Angular — это чтобы ты, блядь, не писал тонны однообразного кода для обновления вида. Изменил данные — фреймворк сам всё перерисует, где надо. Сидишь, кофе пьёшь, а он за тебя работает. Главное — не забудь про FormsModule для двусторонней связи, а то будет обидно.