Від автора: в Angular 2 ми можемо використовувати структуру елементів DOM HTML-сторінки для зміни значень елементів під час виконання. Давайте розглянемо докладніше, як працює в Angular DOM.
Тег input
Додайте наступний код у файл app.component.ts.
import {
Component
} from ‘@angular/core’;
@Component ({
selector: ‘my-app’,
template:’
‘
})
export class AppComponent { }
У наведеному вище коді необхідно зазначити наступне.
[value] = «username» — використовується для прив’язки вираження username до властивості value елемента вводу.
(input) = «expression» — це декларативний спосіб прив’язки до вираження входить події елемента вводу.
username = $event.target.value — вираз, який виконується при запуску вхідного події.
$event — в об’єкті $event лежатданные, які характерні для нативного об’єкта подій.
Після збереження всіх змін в коді і оновлення рядка браузера ви отримаєте наступний результат. Тепер ви можете ввести будь-який текст, і цей текст буде відображений поруч з елементом введення.
Введення кліка
Додайте наступний код у файл app.component.ts.
import {
Component
} from ‘@angular/core’;
@Component ({
selector: ‘my-app’,
template: ‘Click Me {{clickMessage}}’
})
export class AppComponent {
clickMessage = ‘Hello’;
onClickMe() {
this.clickMessage = ‘This tutorial!’;
}
}
Після збереження всіх змін в коді оновлення сторінки браузера ви отримаєте наступний результат.
Коли ви натиснете кнопку «Click Me», ви отримаєте наступний результат.
