Свойства класса компонента в темплейте Angular

Все публичные свойства класса компонента будут доступны внутри темплейта компонента. Давайте посмотрим, как к ним обратится.

Пусть в нашем классе есть следующее публичное свойство:

app/app.component.tsexport class AppComponent {
  public test: string = 'abcde';
}

Выведем содержимого нашего свойства в верстке. Для этого нужно написать имя свойства внутри двойных фигурных скобок:

app/app.component.html<div>
  {{ test }}
</div>

app/app.component.html<ul>
  <li>name: john</li>
  <li>surn: smit</li>
</ul>