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

Интерполяция выводит текст, но элементам нужны и другие данные: адрес картинки, состояние кнопки, класс. Для этого есть привязка свойств — квадратные скобки. Обратное направление, от пользователя к классу, — привязка событий в круглых скобках.

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

Имя свойства в квадратных скобках, справа — выражение из класса:

// src/app/todo-list/todo-list.ts
import { Component } from '@angular/core';
 
@Component({
  selector: 'app-todo-list',
  templateUrl: './todo-list.html',
})
export class TodoList {
  newTitle = '';
}

<!-- src/app/todo-list/todo-list.html -->
<input placeholder="Новая задача" />
<button [disabled]="newTitle === ''">Добавить</button>

Кнопка заблокирована, пока поле newTitle пустое. Без скобок атрибут disabled="..." получил бы строку, и кнопка была бы заблокирована всегда.

Классы и стили

Отдельный класс и отдельное CSS-свойство тоже привязываются:

<!-- src/app/todo-list/todo-list.html -->
<li [class.done]="true">Купить хлеб</li>
<p [style.color]="newTitle ? 'black' : 'gray'">Подсказка</p>

Класс done добавляется, когда выражение истинно, и убирается, когда ложно.

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

Имя события в круглых скобках, справа — вызов метода:

// src/app/todo-list/todo-list.ts
export class TodoList {
  newTitle = '';
  tasks: string[] = [];
 
  add() {
    this.tasks.push(this.newTitle);
    this.newTitle = '';
  }
}

<!-- src/app/todo-list/todo-list.html -->
<button (click)="add()">Добавить</button>
<p>Всего задач: {{ tasks.length }}</p>

После каждого щелчка счётчик «Всего задач» растёт на единицу.

Объект события

Переменная $event содержит объект события браузера. Из него берут, например, текст поля:

<!-- src/app/todo-list/todo-list.html -->
<input
  placeholder="Новая задача"
  [value]="newTitle"
  (input)="newTitle = $any($event.target).value"
/>
<button [disabled]="newTitle === ''" (click)="add()">Добавить</button>

Теперь поле и класс связаны: ввод текста записывает его в newTitle, кнопка разблокируется, а после щелчка поле очищается. В обработчике событий присваивание разрешено. Функция $any отключает проверку типа, потому что TypeScript не знает, что target — это поле ввода.

Переменная шаблона

Проще получить элемент через переменную шаблона — имя с решёткой:

<!-- src/app/todo-list/todo-list.html -->
<input #field [value]="newTitle" (keyup.enter)="newTitle = field.value; add()" />

#field ссылается на сам элемент input. Событие keyup.enter срабатывает только по клавише Enter.

Частая ошибка

Смешивать интерполяцию и квадратные скобки нельзя: [disabled]="{{ isEmpty }}" вызовет ошибку сборки. Внутри квадратных скобок уже выражение — пишите [disabled]="isEmpty".