Создание компонента в Angular (с помощью CLI/ручно)

Создание компонента с помощью Angular CLI

ng generate component <component-name>

Вход в полноэкранный режим Выйти из полноэкранного режима

По умолчанию эта команда создает следующее:

Папку с именем компонента
Файл компонента, <component-name>.component.ts
Файл шаблона, <component-name>.component.html
CSS файл, <component-name>.component.css
Файл спецификации тестирования, <component-name>.component.spec.ts.

Где <component-name> — имя вашего компонента.

Создание компонента вручную

Чтобы создать новый компонент вручную:

Перейдите в каталог вашего проекта Angular.
Создайте новый файл <component-name>.component.ts.
В верхней части файла добавьте следующий оператор импорта.
```
content_copyimport {Component } from '@angular/core';
```
После оператора import добавьте декоратор @[Component](https://angular.io/api/core/Component).
```
content_copy@Component({
})
```
Выберите CSS-селектор для компонента.
```
content_copy@Component({
  selector: 'app-component-overview',
})
```
Дополнительную информацию о выборе селектора см. в разделе Указание селектора компонента.
Определите HTML-шаблон, который компонент использует для отображения информации. В большинстве случаев этот шаблон представляет собой отдельный HTML-файл.
```
content_copy@Component({
  selector: 'app-component-overview',
  templateUrl: './component-overview.component.html',
})
```
Дополнительные сведения об определении шаблона компонента см. в разделе Определение шаблона компонента.
Выберите стили для шаблона компонента. В большинстве случаев стили для шаблона компонента задаются в отдельном файле.
```
content_copy@Component({
  selector: 'app-component-overview',
  templateUrl: './component-overview.component.html',
  styleUrls: ['./component-overview.component.css']
})
```
Добавьте оператор class, который включает код компонента.
```
content_copyexport class ComponentOverviewComponent {

}
```

Ссылка : Обзор компонентов Angular