Шаблоны

Angular - клиентский фреймворк, поэтому основная его работа связана с представлением данных и обработкой шаблонов.

Логика и представление реализуются посредством компонентов, в которых экземпляр класса компонента (контроллер) взаимодействует с шаблоном (angular template) и задает поведение элемента.

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

интерполяция;
одностороннее связывание;
обработка событий;
двустороннее связывание.
Интерполяция

<p>Hello, {{name}}</p>
<p>{{'Hello,' + name}}</p>
<p>{{printGreeting()}}</p>
В первом случае между {{ и }} находится название свойства класса компонента, которое заменяется его значением.

Как видно из примеров, в Angular шаблонах также допускается использование простых арифметических операций, операций со строками (конкатенация), можно вызвать метод класса. Но нельзя использовать операторы ++, --, +=, -=, ключевое слово new.

Класс компонента может выглядеть так:


export class HelloWorldComponent {
name = 'World'

printGreeting(hero: Hero): string {
return 'Hello,' + this.name
}
}
Одностороннее связывание
Одностороннее связывание характеризуется движением данных в одном направлении, а именно из компонента в элемент DOM.

Свойство элемента DOM - это текущее значение атрибута элемента. Это может быть как стандартный HTML-атрибут, так и атрибут компонента или директивы (рассмотрено в одной из следующих глав).


<a [href]="homePageUrl">Home Page</a>
В данном случае значение из компонента передается свойству DOM href.

Механизм одностороннего связывания позволяет только устанавливать значения свойств DOM в Angular шаблоне, чтение недоступно. Также нельзя в HTML осуществлять вызов метода компонента, который не возвращает значение.

Методы, задающие определенное поведение элемента, могут вызываться при возникновении какого-либо события.

Название свойства элемента DOM должно быть заключено в квадратные скобки или иметь префикс bind-, иначе значением будет строка с названием свойства компонента.

Альтернативный синтаксис:


<a bind-href="homePageUrl">Home Page</a>
Стоит отметить, что если значением свойства компонента является строка, содержащая HTML-теги, то Angular позаботится об этом. В случае интерполяции эти теги будут выведены строкой, а при одностороннем связывании просто проигнорированы.

В Angular template существует специализированный вид одностороннего связывания. Он задает значения атрибутов, классов и стилей.

Атрибуты
Не все атрибуты HTML-разметки имеют соответствующие им свойства, например, colspan. В этом случае синтаксис будет такой:


<td [attr.colspan]="2 + 1">Table Cell Content</td>
Если попытаться сделать это классическим способом без attr., то Angular сообщит об этом.

Классы
Есть три способа задать в Angular CSS-класс элементу. Первый:


<p [class]="classes">Some text.</p>
Свойство classes - строка с названием классов, разделенных пробелами. В этом случае текущее значение атрибута class будет перезаписано новым.

Чтобы добавить класс уже к существующим, используется второй способ:


<p [class.red-text]="isRed">Some text.</p>
Здесь red-text - название класса, а isRed - переменная компонента типа boolean, значение которой определяет, будет ли в Angular шаблоне установлен класс или нет.

Третий способ задания в Angular CSS-класса - использование директивы NgClass, которая рассмотрена в главе "Директивы. Встроенные".

Стили
Определения строковых CSS-стилей происходит следующим образом:


<div [style.width.%]="isHalf ? 50 : 100">Some text.</p>
После style указывается определенный стиль для элемента Angular template, а затем, если это необходимо, указываются единицы измерения свойства. Выражением справа может быть как свойство компонента, так и условное выражение.

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