Файл с клас на компонент в 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 и изучете го.

Направете няколко файла със стилове и ги свържете в декоратора.