Datoteka sa klasom komponente u Angularu

Osnovni deo svake komponente je njen funkcionalitet, odnosno sama njena programa. U Angularu, funkcionalnost komponente se piše na programskom jeziku TypeScript i predstavlja OOP klasu.

U svakoj komponenti se ova klasa nalazi u datoteci sa ekstenzijom .ts. U našoj osnovnoj komponenti to će biti datoteka app.component.ts.

Hajde da se upoznamo sa sadržajem ove datoteke. Za početak obratite pažnju na klasu naše komponente:

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

Na ovu klasu se primenjuje dekorator @Component. Ovaj dekorator svojim parametrima prima objekat, koji konfiguriše našu komponentu:

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

U svojstvu templateUrl je zadat put do datoteke koja sadrži izgled (verstku) naše komponente.

U svojstvu styleUrls je zadat niz putanja do CSS datoteka, koje stilizuju izgled naše komponente. Kao što vidite, datoteka stilova može biti više od jedne.

U svojstvu selector je zadat selektor HTML taga, u koji će se ispisivati (montirati) HTML kod naše komponente. U našem slučaju vidimo ime app-root. Ovom imenu odgovara tag sa istim imenom. Ovaj tag je napisan u datoteci šablona src/index.html. Na to mesto, gde je napisan ovaj tag, i će se ubacivati izgled naše komponente.

U svojstvu imports su naznačeni moduli, koji se uvoze u našu komponentu.

U svojstvu standalone će uvek biti naznačena vrednost true. Trenutno je ovo pre servisna stvar Angulara, stoga za sada ne zadubljujte se u nju.

Otvorite datoteku app.component.ts i proučite je.

Napravite nekoliko datoteka sa stilovima i povežite ih u dekoratoru.