Від автора: розглянемо ще один принцип того, як працюють в Angular компоненти. У Angular JS можна дуже просто відображати значення властивостей класу в HTML-формі. Давайте розглянемо практичний приклад. А саме в цьому прикладі ми розглянемо відображення значень різних властивостей у класі на HTML – сторінці.
Крок 1 — Змінити код у файлі app.component.ts наступним чином.
import {
Component
} from ‘@angular/core’;
@Component ({
selector: ‘my-app’,
templateUrl: ‘app/app.component.html’
})
export class AppComponent {
TutorialName: string = ‘Angular JS2’;
appList: string[] = [“Binding”, “Display”, “Services”];
}
У наведеному вище коді необхідно зазначити наступне.
Ми визначаємо масив з ім’ям appList, який має тип string.
Ми визначаємо три строкових елемента в якості складових масиву, а саме Binding, Display, Services.
Ми також визначили властивість TutorialName, яке має значення Angular 2.
Крок 2 — Внесіть наступні зміни в файл app/app.component.html, який є файлом шаблону.
The first Topic is {{appList[0]}}
The second Topic is {{appList[1]}}
The third Topic is {{appList[2]}}
У наведеному вище коді необхідно зазначити наступне.
Ми посилаємося на властивість TutorialName, щоб вказати назву керівництва на нашій HTML-сторінці.
Ми використовуємо значення індексу для масиву для відображення кожного з трьох його елементів.
Крок 3 — Збережіть всі зміни в коді і оновіть сторінку браузера, ви отримаєте наступний результат. Ви можете чітко бачити, що дані відображаються відповідно зі значеннями властивостей у класі.
Інший простий приклад коду, який прив’язується на льоту — використання html-тега input. Він просто відображає дані, оскільки самі дані беруться з html-тега. Змініть наступним чином файл app/app.component.html, який є файлом шаблону.
У наведеному вище коді необхідно зазначити наступне.
[value] = “username”- використовується для прив’язки вираження username до значення властивості елемента вводу.
(input) = “expression”- це декларативний спосіб прив’язки вирази до вхідного події елемента вводу.
username = $event.target.value — вираз, який виконується при запуску вхідного події.
$event — в об’єкті $event лежать дані, які характерні для нативного об’єкта подій.
Коли ви збережете всі зміни в коді і оновіть сторінку браузера, то отримаєте наступний результат.
Тепер введіть щось в полі введення, наприклад «Tutorialspoint». Результат буде відповідним чином змінений.
