Súbor s triedou komponentu v Angular

Hlavnou časťou každého komponentu je jeho funkcionalita, teda vlastne jeho program. V Angulari sa funkcionalita komponentu píše v jazyku TypeScript a predstavuje OOP triedu.

V každom komponente sa táto trieda nachádza v súbore s príponou .ts. V našom hlavnom komponente to bude súbor app.component.ts.

Poďme sa oboznámiť s obsahom tohto súboru. Na začiatok si všimnite triedu nášho komponentu:

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

Na túto triedu je aplikovaný dekorátor @Component. Tento dekorátor ako parameter prijíma objekt, ktorý konfiguruje náš komponent:

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

Vo vlastnosti templateUrl je zadaná cesta k súboru, ktorý obsahuje HTML layout nášho komponentu.

Vo vlastnosti styleUrls je zadané pole cest k CSS súborom, ktoré štýlujú HTML layout nášho komponentu. Ako vidíte, súborov so štýlmi môže byť viacero.

Vo vlastnosti selector je zadaný selektor HTML tagu, do ktorého bude vypísaný (namontovaný) HTML kód nášho komponentu. V našom prípade vidíme názov app-root. Tomu názvu zodpovedá tag s rovnakým menom. Tento tag je napísaný v súbore layoutu src/index.html. Na miesto, kde je napísaný tento tag, bude vložený HTML layout nášho komponentu.

Vo vlastnosti imports sú uvedené moduly, ktoré sú importované do nášho komponentu.

Vo vlastnosti standalone bude vždy uvedená hodnota true. Momentálne je to skôr servisná vec Angularu, preto do nej zatiaľ nevnímajte.

Otvorte súbor app.component.ts a študujte ho.

Vytvorte niekoľko súborov so štýlmi a pripojte ich v dekorátori.