Page 20 - 6182

(ngOnInit, ngAfterContentInit, ngAfterViewInit, ngOnDestroy).
Детальну інформацію можна отримати в документації.
Зв’язування даних

Приклад, який наведений вище, продемонстрував процес
створення компонента, як структури, що може зв‘язувати HTML-
шаблон із класом на мові TypeScript, такий підхід дозволяє
створювати статичні web-сторінки. Для того, щоб пізнати всю

потужність фреймворку Angular потрібно зрозуміти, яким чином
відбувається зв‘язування даних із класу (об‘єкту) компонента із
його шаблоном. В свою чергу дані компонент зазвичай отримує

шляхом виклику методів об‘єктів деяких сервісів Так як нас на
поточному етапі цікавить лише процес зв‘язування даних класу
компонента із шаблоном, дані класі будуть задані явно.
Фреймворк Angular визначає чотири підходи до зв‘язування

даних:
− одностороннє зв‘язування (one-way bindings / expression);
− зв‘язування властивостей (property bindings);

− зв‘язування подій (event bindings);
− звостороннє зв‘язування (two-way bindings).
Розглянемо приклади використання різних видів зв‘язування.

Нижче наведено приклад одностороннього зв‘язування, для
цього в класі компонента було визначено змінну масив об‘єктів з
даними, а з допомогою структурної директиви *ngFor ці об‘єкти

були відображені у вигляді списку в шаблоні. Результат виконання
і програмний код показано на рисунках 2.4, 2.5 відповідно.

Рисунок 2.4 – Результат виконання додатку із компонентом

20