Привязка данных

Существует несколько формы привязки данных:

• привязка значения к DOM (односторонняя привязка)

Шаблон *.html

// пример интерполяции
<p>
  Hello {{message}}
</p> 

*.ts — файл компонента

 
export class DateComponent implements OnInit {
  message: string = "World";
  constructor() { }
  ...
}

 

• Двусторонний биндинг

// компонент для вывода времени каждую секунду
<div>
  <h3>Time:</h3>
  <p>{{message}}</p>
</div> 

export class DateComponent implements OnInit {
  message: string;
  constructor() { // (1)
    setInterval(() => {
      this.message = new Date().toLocaleTimeString(); // (2)
    }, 1000);
  } 

В конструкторе (1) объявляем интервал через каждую секунду. Переменной message присваиваем текущее время (2).