Page 18 - 6182

− Шаблон (template) – визначає розмітку HTML-вигляду,
який буде відображений під час відтворення (рендерингу)
компонента;

− Метадані (metadata) – використовуються для
декорування класу, розширення його функціональних
можливостей;
Будь-який компонент Angular створюється з допомогою

декоратора @Component, всередині декоратора описуються
метадані, які описані в таблиці 2.2.

Таблиця 2.2 – Метадані (атрибути) декоратора
@Component
Назва Призначення
selector селектор – тег, атрибут, клас за допомогою якого
компонент можна викликати в шаблоні додатку
template Шаблон компонента, який можна записати як

рядкове представлення
templateUrl Файл шаблону компонента
styles: [] Масив CSS-стилів для шаблону
styleUrls: [] Масив файлів CSS-стилів для шаблону

Насправді, властивостей є значно більше, але в таблиці
наведені ті, які найчастіше і зазвичай використовуються, деталі
можна дізнатись з офіційної документації.
Розглянемо детальніше процес створення, функціонування і

використання компонентів.
Так само як і модулі, компоненти доцільно створювати з
допомогою інструменту Angular CLI.

$ng g component <new_component>
Результат виконання команди наведено на рисунку 2.2.

Після виконання цієї команди в структурі проекту будуть
створені:
− директорія з файлами компонента;

− файли класу компонента (.ts), шаблону (.html), таблиці
стилів (.css), заготовка для модульного тесту (.spec.ts);
− оновлено файл визначення модуля, в який включено

визначення новоствореного компонента.

18