Файл с классом компонента в Angular

Основной частью любого компонента является его функционал, то есть собственно его программа. В Angular функционал компонента пишется на языке TypeScript и представляет собой ООП класс.

В каждом компоненте этот класс расположен в файле с расширением .ts. В нашем основном компоненте это будет файл app.component.ts.

Давайте ознакомимся с содержимым этого файла. Для начала обратите внимание на класс нашего компонента:

export class AppComponent {
	title: string = 'test';
}

К этому классу применяется декоратор @Component. Этот декоратор своим параметром принимает объект, который конфигурирует наш компонент:

@Component({
	selector: 'app-root',
	standalone: true,
	imports: [FormsModule],
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.css'],
})

В свойстве templateUrl задан путь к файлу, содержащему верстку нашего компонента.

В свойстве styleUrls задан массив путей к CSS файлам, стилизующим верстку нашего компонента. Как вы видите, файл стилей может быть не один.

В свойстве selector задан селектор HTML тега, в который будет выводиться (монтироваться) HTML код нашего компонента. В нашем случае мы видим имя app-root. Этому имени соответствует одноименный тег. Этот тег написан в файле макета src/index.html. В то место, где написан этот тег, и будет вставляться верстка нашего компонента.

В свойстве imports указаны модули, которые импортируются в наш компонент.

В свойстве standalone всегда будет указано значение true. Сейчас это скорее служебная штука Angular, поэтому пока не вникайте в нее.

Откройте файл app.component.ts и изучите его.

Сделайте несколько файлов со стилями и подключите их в декораторе.