Шаблоны и привязки данных

В эпоху jQuery интерфейс синхронизировали руками: найти элемент, поменять текст, навесить обработчик. Каждое изменение данных разработчик вручную разносил по DOM, и рано или поздно одно из мест забывалось - экран показывал одно, а данные в памяти были другими. Привязки данных в Angular убирают этот класс багов: разметка декларативно связывается с полями компонента, и фреймворк сам держит их в синхроне.

• Формы регистрации: поле ввода двусторонне связано с моделью, и значение всегда отражает состояние
• Дашборды: цифры и графики привязаны к данным сервера и обновляются без ручного трогания DOM
• Кнопки и переключатели: привязка событий вызывает методы компонента по клику без addEventListener вручную
• Динамические стили: класс или атрибут disabled привязывается к выражению и меняется сам при смене состояния
• Поисковые строки: ввод пользователя через ngModel мгновенно отражается в логике фильтрации

Предварительные знания

• Урок ng-03: компоненты, их класс и шаблон
• Базовый HTML: атрибуты, элементы форм, события
• Понимание свойств DOM-элементов: value, disabled, src
• Идея состояния компонента: поля класса, меняющиеся во времени

Интерполяция и привязка свойств

Самая простая привязка - интерполяция. Двойные фигурные скобки {{ }} вставляют значение из класса компонента прямо в текст шаблона. Когда поле меняется, текст на экране обновляется сам. Это уже декларативно: разработчик не пишет команды обновления DOM, а лишь указывает, где должно появиться значение.

Квадратные скобки [src] - это привязка свойства. В отличие от интерполяции, которая работает с текстом, привязка свойства передаёт значение выражения в свойство DOM-элемента. Здесь avatarUrl попадает в свойство src картинки, а булево !isAdmin - в свойство disabled кнопки. Меняется поле - меняется свойство элемента.

Важно не путать привязку свойства [disabled]="x" со статическим атрибутом disabled="x". Без скобок строка передаётся как есть, и disabled="false" всё равно отключит кнопку, потому что любая непустая строка истинна. Со скобками вычисляется выражение, и false действительно означает включено.

Привязка событий

Если привязка свойства передаёт данные из компонента в шаблон, то привязка события идёт в обратную сторону: из шаблона в компонент. Имя события берётся в круглые скобки, а в значении пишется выражение, которое выполнится при срабатывании. Так клик, ввод или наведение вызывают методы класса без ручного addEventListener.

Объект события доступен через специальную переменную event. Например, при вводе в поле (input)="onInput(event)" передаёт нативное событие, из которого берётся введённое значение. Круглые скобки читаются как поток наружу из элемента, квадратные - как поток внутрь элемента.

Привязки направлены: квадратные скобки [ ] это вход (данные внутрь элемента), круглые скобки ( ) это выход (события наружу). Эта симметрия помогает читать шаблон: [value] кладёт значение в поле, (input) ловит ввод из поля.

Двусторонняя привязка и ссылочные переменные

Для полей форм часто нужна привязка в обе стороны: поле показывает текущее значение модели и при вводе обновляет её. Это двусторонняя привязка через ngModel, синтаксис [(ngModel)]. Скобки прозвали бананом в коробке: квадратные снаружи (вход) и круглые внутри (выход) одновременно. По сути это сокращение для пары [value] и (input).

Чтобы ngModel работал, нужно добавить FormsModule в массив imports компонента. В современном Angular доступны и стабильные с v22 Signal Forms, но ngModel остаётся самым коротким способом связать поле ввода с одним значением в шаблонных формах.

Шаблонная ссылочная переменная объявляется через #имя прямо на элементе и даёт прямой доступ к нему внутри шаблона. Это полезно, чтобы прочитать значение поля или вызвать метод дочернего компонента без хранения данных в классе. Переменная видна в любом месте того же шаблона.

Связь с другими темами

Привязки - язык, на котором шаблон общается с логикой:

• Встроенный control flow — @if и @for решают, какие привязанные элементы вообще рисовать
• Сигнальные input и output — Привязка свойств и событий передаёт данные между родителем и ребёнком
• Пайпы — Пайпы форматируют значения прямо внутри интерполяции в шаблоне

Итог

• Интерполяция {{ }} вставляет значение поля компонента в текст шаблона
• Привязка свойства [prop]="выражение" передаёт значение в свойство DOM-элемента или дочернего компонента
• Привязка события (event)="метод()" вызывает код компонента в ответ на действие пользователя
• Двусторонняя привязка [(ngModel)] объединяет привязку свойства и события для полей форм
• Шаблонная ссылочная переменная #ref даёт прямой доступ к элементу или компоненту внутри шаблона

Связанные уроки

• ng-03-components — Привязки живут в шаблоне компонента, разобранного в прошлом уроке
• ng-05-control-flow — Встроенный control flow управляет тем, какие привязанные элементы рисуются
• ng-06-inputs-outputs — Привязка свойств и событий лежит в основе передачи данных между компонентами