Шаблоны в Angular

В Angular шаблон — это план фрагмента пользовательского интерфейса (UI). Шаблоны написаны на HTML, и в шаблоне можно использовать специальный синтаксис, чтобы использовать многие функции Angular.

Angular расширяет синтаксис HTML в ваших шаблонах дополнительными функциями.
Например, синтаксис привязки данных Angular помогает динамически устанавливать свойства объектной модели документа (DOM).

Почти весь синтаксис HTML является допустимым синтаксисом шаблона. Однако, поскольку шаблон Angular является лишь фрагментом пользовательского интерфейса, он не включает такие элементы, как <html>, <body> или <base>.

Примечание. Чтобы исключить риск атак путем внедрения скриптов, Angular не поддерживает элемент <script> в шаблонах. Angular игнорирует тег <script> и выводит предупреждение в консоль браузера. Дополнительные сведения см. на странице Безопасность.

Отображение значения с интерполяцией

Интерполяция относится к встраиванию выражений в размеченный текст. По умолчанию интерполяция использует двойные фигурные скобки {{ и }} в качестве разделителей.

Пример:

app.component.ts

message = "Here is the initialize message";

<p> {{message}} </p>

Пример:-

<p>{{title}}</p>
<div><img alt="item" src="{{itemImageUrl}}"></div>

app.component.ts

message = "Here is the initialize message";
getMessage():string{
  return this.message;
}

<p>{{getMessage()}}</p>

Операторы шаблона — это методы или свойства, которые вы можете использовать в своем HTML для ответа на пользовательские события. С помощью операторов шаблона ваше приложение может привлекать пользователей с помощью таких действий, как отображение динамического содержимого или отправка форм.

Пример:-

(click) = "updateMessage()"
<button (click) = "updateMessage()">Update Message</button>

Подобно шаблонным выражениям, шаблонные операторы используют язык, похожий на JavaScript. Однако синтаксический анализатор операторов шаблона отличается от синтаксического анализатора выражений шаблона. Кроме того, синтаксический анализатор операторов шаблона специально поддерживает как базовые присваивания (=), так и цепочки выражений с точкой с запятой (;).

Не допускается следующий синтаксис выражений JavaScript и шаблонов:

1. новый
2. Операторы инкремента и декремента, ++ и —
3. Присваивания операторов, такие как += и -=
4. Побитовые операторы, такие как | и &
5. Оператор трубы