Soubor s třídou komponentu v Angular

Hlavní částí každého komponentu je jeho funkcionalita, tedy vlastně jeho program. V Angular se funkcionalita komponentu píše v jazyce TypeScript a představuje třídu OOP.

V každém komponentu se tato třída nachází v souboru s příponou .ts. V našem hlavním komponentu to bude soubor app.component.ts.

Pojďme se seznámit s obsahem tohoto souboru. Nejprve si všimněte třídy našeho komponentu:

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

Na tuto třídu je aplikován dekorátor @Component. Tento dekorátor přijímá ve svém parametru objekt, který konfiguruje náš komponent:

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

Ve vlastnosti templateUrl je zadána cesta k souboru obsahujícímu značkování našeho komponentu.

Ve vlastnosti styleUrls je zadáno pole cest k CSS souborům, které stylují značkování našeho komponentu. Jak vidíte, souborů se styly může být více.

Ve vlastnosti selector je zadán selektor HTML tagu, do kterého bude vkládán (montován) HTML kód našeho komponentu. V našem případě vidíme název app-root. Tomuto názvu odpovídá stejnojmenný tag. Tento tag je napsán v souboru šablony src/index.html. Na místo, kde je tento tag napsán, bude vloženo značkování našeho komponentu.

Ve vlastnosti imports jsou uvedeny moduly, které jsou importovány do našeho komponentu.

Ve vlastnosti standalone bude vždy uvedena hodnota true. V tuto chvíli je to spíše služební záležitost Angularu, proto se do toho zatím nezabývejte.

Otevřete soubor app.component.ts a prostudujte jej.

Vytvořte několik souborů se styly a připojte je v dekorátoru.