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

Направите неколико фајлова са стиловима и повежите их у декоратору.