Перейти к содержанию

Синтаксис шаблона

📅 30.09.2026

В Angular шаблон — это фрагмент HTML. Специальный синтаксис внутри шаблона открывает многие возможности Angular.

Перед этим подробным руководством загляните в Основы.

У каждого компонента Angular есть шаблон, который задаёт DOM, отрисовываемый компонентом на странице. Благодаря шаблонам Angular сам поддерживает страницу в актуальном состоянии, когда данные меняются.

Шаблоны обычно лежат в свойстве template файла *.ts или в файле *.html. Подробнее — в подробном руководстве по компонентам.

Как работают шаблоны?

Шаблоны опираются на синтаксис HTML и добавляют встроенные функции шаблона, привязку данных, прослушивание событий, переменные и другое.

Angular компилирует шаблоны в JavaScript, чтобы построить внутреннее представление приложения. Один из плюсов — встроенные оптимизации отрисовки, которые Angular применяет к приложению автоматически.

Отличия от обычного HTML

Среди отличий шаблонов от обычного синтаксиса HTML:

  • Комментарии в исходном коде шаблона не попадают в отрисованный результат
  • Элементы компонентов и директив можно закрывать сами на себя (например, <UserProfile />)
  • Атрибуты с некоторыми символами (то есть [], () и так далее) имеют для Angular особый смысл. Подробнее — в документации по привязке и документации по обработчикам событий.
  • Символ @ имеет для Angular особый смысл: через него в шаблон добавляют динамическое поведение, например управление потоком. Буквальный символ @ можно вставить HTML-сущностью (&commat; или &#64;).
  • Angular игнорирует и схлопывает лишние пробельные символы. Подробнее — в статье пробелы в шаблонах.
  • Angular может добавлять на страницу узлы-комментарии как заполнители динамического содержимого, но разработчик может их не учитывать.

Кроме того, большая часть синтаксиса HTML допустима в шаблоне, но Angular не поддерживает элемент <script> в шаблонах. Подробнее — на странице Безопасность.

Что дальше?

Могут пригодиться и эти темы:

Темы Подробности
Привязка динамического текста, свойств и атрибутов Привязка динамических данных к тексту, свойствам и атрибутам.
Добавление обработчиков событий Реакция на события в шаблоне.
Двусторонняя привязка Одновременно привязывает значение и передаёт изменения.
Управление потоком Условный показ, скрытие и повтор элементов.
Пайпы Декларативное преобразование данных.
Размещение дочернего содержимого через ng-content Управление тем, как компоненты отрисовывают содержимое.
Фрагменты шаблона через ng-template Объявление фрагмента шаблона.
Группировка элементов через ng-container Группировка нескольких элементов или пометка места отрисовки.
Переменные в шаблонах Объявления переменных.
Отложенная загрузка через @defer Откладываемые представления через @defer.
Синтаксис выражений Сходства и различия выражений Angular и обычного JavaScript.
Пробелы в шаблонах Как Angular обрабатывает пробелы.

Источник: https://angular.dev/guide/templates

Комментарии