От автора: в Angular 2 мы можем использовать структуру элементов DOM HTML-страницы для изменения значений элементов во время выполнения. Давайте рассмотрим подробнее, как работает в Angular DOM.
Тег input
Добавьте следующий код в файл app.component.ts.
import { Component } from '@angular/core'; @Component ({ selector: 'my-app', template: ' <div> <input [value] = "name" (input) = "name = $event.target.value"> {{name}} </div> ' }) export class AppComponent { }
В приведенном выше коде необходимо отметить следующее.
[value] = «username» — используется для привязки выражения username к свойству value элемента ввода.
(input) = «expression» — это декларативный способ привязки выражения к входящему событию элемента ввода.

Практический курс по созданию веб-приложения на Angular4
Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.
Узнать подробнееusername = $event.target.value — выражение, которое выполняется при запуске входящего события.
$event — в объекте $event лежатданные, которые характерны для нативного объекта событий.
После сохранения всех изменений в коде и обновления строки браузера вы получите следующий результат. Теперь вы можете ввести любой текст, и этот текст будет отображен рядом с элементом ввода.
Ввод клика
Добавьте следующий код в файл app.component.ts.
import { Component } from '@angular/core'; @Component ({ selector: 'my-app', template: '<button (Click) = "onClickMe()"> Click Me </button> {{clickMessage}}' }) export class AppComponent { clickMessage = 'Hello'; onClickMe() { this.clickMessage = 'This tutorial!'; } }
После сохранения всех изменений в коде и обновления страницы браузера вы получите следующий результат.
Когда вы нажмете кнопку «Click Me», вы получите следующий результат.
Источник: https://www.tutorialspoint.com/
Редакция: Команда webformyself.

Практический курс по созданию веб-приложения на Angular4
Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.
Узнать подробнее