Dječije komponente u Angularu

Kao što je pomenuto na samom početku udžbenika, u Angularu se ceo projekat deli na komponente. U prethodnim lekcijama radili smo samo sa glavnom komponentom, koja je kreirana podrazumevano. Hajde sada da naučimo da kreiramo dječije komponente.

Kod novih komponenti automatski se generiše u Angularu pomoću specijalne komande terminala: generate component. Posle reči component treba da napišemo ime naše nove komponente. Pretpostavimo da želimo da generišemo komponentu user:

ng generate component user

Nakon izvršenja komande videćemo da se pojavio novi folder app/user. U njemu će se nalaziti svi standardni fajlovi komponente.

U fajlu sa komponentom user.component.ts biće automatski kreiran dekorator komponente:

@Component({
	selector: 'app-user',
	templateUrl: './user.component.html',
	styleUrls: ['./user.component.css']
})

Takođe, u ovom fajlu će automatski biti kreirana klasa komponente:

export class UserComponent {

}

Sada našu dječiju komponentu treba da povežemo sa roditeljskom. Neka roditeljska bude komponenta app, koja je inicijalno prisutna pri instalaciji frameworka. Importujmo je u nju:

import { UserComponent } from './user/user.component';

U dekoratoru komponente u ključu imports navedimo naš importovanu komponentu:

@Component({
	selector: 'app-root',
	imports: [UserComponent], // ovde
	templateUrl: './user.component.html',
	styleUrls: ['./user.component.css']
})

Sada možemo da prikažemo sadržaj dječije komponente u roditeljskoj. Za ovo, u fajlu sa template-om roditelja treba da napišemo specijalni tag, čije je ime zadato u osobini selector dekoratora @Component potomka. U našem slučaju to je tag app-user. Napišimo ga u template-u roditelja:

neki tekst
<app-user></app-user>

Generišite komponentu ProductComponent. Povežite ovu komponentu sa glavnom komponentom vašeg projekta.

Unesite izmene u template dječije komponente. Uverite se da su primenjene u browser-u.

Promenite CSS stilove dječije komponente. Uverite se da su primenjeni u browser-u.

U dječijoj komponenti napravite osobine name i price. Prikažite njihove vrednosti u template-u dječije komponente.