Обновление класса компонента

В Angular логика и поведение компонента определяются в TypeScript-классе компонента.

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

1. Add a property called city

   Обновите класс компонента, добавив свойство city в класс App.

   export class App {
     city = 'San Francisco';
   }

   Свойство city имеет тип string, но вы можете опустить указание типа благодаря выводу типов в TypeScript. Свойство city может использоваться в классе App, и на него можно ссылаться в шаблоне компонента.

   
   

   Чтобы использовать свойство класса в шаблоне, необходимо использовать синтаксис {{ }}.

2. Update the component template

   Обновите свойство template, чтобы оно соответствовало следующему HTML:

   template: `Hello {{ city }}`,

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

3. More practice with interpolation

   Попробуйте следующее — добавьте еще одну конструкцию {{ }} с содержимым 1 + 1:

   template: `Hello {{ city }}, {{ 1 + 1 }}`,

   Angular вычисляет содержимое {{ }} и отображает результат в шаблоне.

Это только начало возможностей шаблонов Angular. Продолжайте обучение, чтобы узнать больше.