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

Шаблоны

📅 30.09.2026

Синтаксис шаблонов Angular для динамических интерфейсов.

Шаблон компонента — это не только статический HTML. Он берёт данные из класса компонента и вешает обработчики действий пользователя.

Динамический текст

В Angular привязка связывает шаблон компонента с его данными. Когда данные меняются, отрисованный шаблон обновляется сам.

Динамический текст в шаблоне выводят привязкой в двойных фигурных скобках:

1
2
3
4
5
6
7
@Component({
  selector: 'user-profile',
  template: `<h1>Profile for {{ userName() }}</h1>`,
})
export class UserProfile {
  userName = signal('pro_programmer_123');
}

Когда Angular отрисует компонент, на странице будет:

1
<h1>Profile for pro_programmer_123</h1>

Angular сам поддерживает привязку в актуальном состоянии, когда меняется значение сигнала. Если в примере выше обновить сигнал userName:

1
this.userName.set('cool_coder_789');

Страница обновится и покажет новое значение:

1
<h1>Profile for cool_coder_789</h1>

Динамические свойства и атрибуты

Динамическое значение попадает в свойство DOM через квадратные скобки:

1
2
3
4
5
6
7
8
@Component({
  /*...*/
  // Set the `disabled` property of the button based on the value of `isValidUserId`.
  template: `<button [disabled]="!isValidUserId()">Save changes</button>`,
})
export class UserProfile {
  isValidUserId = signal(false);
}

К HTML-атрибуту привязываются так же, если перед именем поставить attr.:

1
2
<!-- Bind the `role` attribute on the `<ul>` element to value of `listRole`. -->
<ul [attr.role]="listRole()"></ul>

Когда привязанное значение меняется, Angular сам обновляет свойства и атрибуты DOM.

Действия пользователя

Слушатель события вешают на элемент шаблона круглыми скобками:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
@Component({
  /*...*/
  // Add an 'click' event handler that calls the `cancelSubscription` method.
  template: `<button (click)="cancelSubscription()">Cancel subscription</button>`,
})
export class UserProfile {
  /* ... */

  cancelSubscription() {
    /* Your event handling code goes here. */
  }
}

Чтобы передать слушателю объект события, в вызове функции используют встроенную переменную $event:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
@Component({
  /*...*/
  // Add an 'click' event handler that calls the `cancelSubscription` method.
  template: `<button (click)="cancelSubscription($event)">Cancel subscription</button>`,
})
export class UserProfile {
  /* ... */

  cancelSubscription(event: Event) {
    /* Your event handling code goes here. */
  }
}

Управление потоком: @if и @for

Части шаблона показывают и скрывают по условию блоком @if:

1
2
3
4
5
6
<h1>User profile</h1>

@if (isAdmin()) {
  <h2>Admin settings</h2>
  <!-- ... -->
}

У блока @if есть необязательная ветка @else:

1
2
3
4
5
6
7
8
9
<h1>User profile</h1>

@if (isAdmin()) {
  <h2>Admin settings</h2>
  <!-- ... -->
} @else {
  <h2>User settings</h2>
  <!-- ... -->
}

Фрагмент шаблона повторяют блоком @for:

1
2
3
4
5
6
7
<h1>User profile</h1>

<ul class="user-badge-list">
  @for (badge of badges(); track badge.id) {
    <li class="user-badge">{{ badge.name }}</li>
  }
</ul>

Ключевое слово track из примера выше связывает данные с элементами DOM, которые создаёт @for. Подробнее — Зачем нужен track в блоках @for?.

Подробнее о шаблонах Angular — в подробном руководстве по шаблонам.

Следующий шаг

Динамические данные и шаблоны уже в приложении. Дальше — как усилить шаблоны: скрывать и показывать элементы по условию, проходить по ним циклом и не только.

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

Комментарии