Шаблоны

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

Отображение динамического текста

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

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

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

Когда Angular отрисовывает компонент, вы видите:

<h1>Profile for pro_programmer_123</h1>

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

this.userName.set('cool_coder_789');

Отображаемая страница обновится с новым значением:

<h1>Profile for cool_coder_789</h1>

Установка динамических свойств и атрибутов

Angular поддерживает привязку динамических значений к свойствам DOM с помощью квадратных скобок:

@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. к имени атрибута:

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

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

Обработка взаимодействия с пользователем

Angular позволяет добавлять обработчики событий к элементу в шаблоне с помощью круглых скобок:

@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. */
  }
}

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

@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 в Angular:

<h1>User profile</h1>

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

Блок @if также поддерживает необязательный блок @else:

<h1>User profile</h1>

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

Вы можете повторять часть шаблона несколько раз с помощью блока @for в Angular:

<h1>User profile</h1>

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

Angular использует ключевое слово track, показанное в примере выше, для связывания данных с элементами DOM, созданными @for. Подробнее см. Why is track in @for blocks important?.

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

Теперь, когда в приложении есть динамические данные и шаблоны, пора узнать, как улучшать шаблоны — условно скрывая или показывая элементы, перебирая их и многое другое.