Компонент - базовый элемент структуры Angular - приложения
app.module.ts
import { Comp1Component } from './comp1/comp1.component';
и
Дальше в шаблоне можно использовать тег <comp1>
Внутри папки app создать папку для компонента
component2
В этой папке создать TypeScript файл с описанием класса компонента
component2.component.ts
Строка
импортирует декоратор компонента из библиотеки Angular core
В файле описания модуля (app.module.ts) мпортировать новый компонент, используя имя файла с его описанием без расширения ts
(import { Test2Component } from './test2/test2.component';)
и зарегистрировать новый компонент в в секции declarations декоратора модуля - @NgModule
Добавить вызов нашего компонента в шаблон главного компонента приложения (app.component.html)
Компоненты могут быть вложенными.
Компонент можно использовать несколько раз.
Например:
В декораторе компонента одно из свойств - селектор компонента.
По этому свойству Angular определяет, в какое место шаблона компонент должен быть помещён.
В качестве селектора обычно используется имя тега, который будет идентифицировать компонент в шаблоне.
selector : 'app-test2-component',
Место компонента в шаблоне в этом случае должно быть задано тегом:
<app-test2> </app-test2>
Но можно также использовать название атрибута тега
selector : '[app-test2]',
или название класса
selector : '.app-test2]',
Место компонента в шаблоне в этом случае может быть задано как :
<div app-test2> </div>
или
<span class="app-test2"> </span>