Синтаксис шаблонов и интерполяция

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

Интерполяция

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

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

<!-- src/app/todo-list/todo-list.html -->
<h2>Задачи: {{ owner }}</h2>

На странице появится заголовок «Задачи: Анна». Шаблон видит все поля и методы класса, кроме объявленных с private.

Выражения

Внутри скобок можно писать короткие выражения: арифметику, сравнения, тернарный оператор, обращение к свойствам объекта и элементам массива.

// src/app/todo-list/todo-list.ts
export class TodoList {
  owner = 'Анна';
  total = 5;
  done = 2;
  tasks = ['Купить хлеб', 'Позвонить Олегу'];
}

<!-- src/app/todo-list/todo-list.html -->
<h2>Задачи: {{ owner }}</h2>
<p>Осталось: {{ total - done }} из {{ total }}</p>
<p>{{ done === total ? 'Всё сделано' : 'Есть дела' }}</p>
<p>Первая задача: {{ tasks[0] }}</p>

На странице: «Осталось: 3 из 5», «Есть дела» и «Первая задача: Купить хлеб».

Вызов методов

Если вычисление длиннее одной строки, вынесите его в метод класса и вызовите в шаблоне:

// src/app/todo-list/todo-list.ts
export class TodoList {
  total = 5;
  done = 2;
 
  progress() {
    return Math.round((this.done / this.total) * 100);
  }
}

<!-- src/app/todo-list/todo-list.html -->
<p>Выполнено: {{ progress() }}%</p>

Выведется «Выполнено: 40%». Методы в шаблоне должны быть быстрыми и ничего не менять — Angular вызывает их при каждой проверке страницы.

Безопасный вывод

Интерполяция всегда выводит текст. Если в поле лежит строка '<b>важно</b>', на странице появятся сами символы с угловыми скобками, а не жирный текст. Так Angular защищает от внедрения чужого HTML-кода.

Чего нельзя в шаблоне

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

Запись {{ Math.round(price) }} выглядит как обычный JavaScript, но сборка выдаст ошибку Property 'Math' does not exist. Глобальные объекты в шаблоне недоступны. Вычисляйте значение в методе или поле класса, как progress() выше.