2. Структура компонентов в Angular 6

Основная работа по Angular - это создание компонентов у каждого из которых своя независимая логика.

Компонент - полноценная сущность, у которой есть своя логика JS(TS), разметка HTML и свой стиль CSS. Это может быть например: шапка сайта, сайдбар, блок новостей, облако тегов и прочее.

Также нужно понимать, что у компонетов могут быть свои родители и наоборот компонент может быть родителем для более мелких компонентов. Например по умолчанию при создании проекта у вас есть главный компонент Root Component (в ангуляр он ещё называется App).

Это по сути - компонент «Сайт», внутри которого есть шапка, сайдбар, слайдер, блок новостей и прочее, где каждый является дочернем от компонента App

Или более наглядно рассмотрим в проекте:

Главный компонент App находиться в папке src/app

В папке главного компонента находиться также папки его дочерних компонентов (News и Slider).

А каждый компонент состоит из 3 основных файлов:

• app.component.css - CSS-стили компонента
• app.component.html - HTML-шаблон компонента
• app.component.ts - логика компонента, которая содержит класс (свойства и методы) и метадату (декораторы)

Создание дочернего компонента

Для создание дочернего компонета будем использовать команду Angular CLi:

ng g c newNameComponent

где:

• g - генерация
• с - компонент
• newNameComponent - название компонента

После генерации вы увидите, что у нового компонента будут такие же файлы, как и у главного компонента.