Децомпоненте у Ангулару

Као што је споменуто на самом почетку приручника, у Ангулару се цео пројекат разбија на компоненте. У претходним лекцијама смо радили само са главном компонентом, која је креирана подразумевано. Хајде сада да научимо да креирамо децомпоненте.

Код нових компонената се аутоматски генерише у Ангулару помоћу посебне наредбе у терминалу: generate component. Након речи component треба написати име наше нове компоненте. Рецимо да желимо да генеришемо компоненту user:

ng generate component user

Након извршавања наредбе видећемо да нам је појавио нова фасцикла app/user. У њој ће се налазити сви стандардни фајлови компоненте.

У фајлу са компонентом user.component.ts биће аутоматски креиран декоратор компоненте:

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

Такође, у овом фајлу ће бити аутоматски креиран и класа компоненте:

export class UserComponent {

}

Сада нашу децокомпоненту требамо да повежемо са родитељском. Нека је родитељска компонента app, која је иницијално присутна приликом инсталације оквира. Импортујмо је у нашу компоненту:

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

У декоратору компоненте, у кључу imports наведемо нашу импортовану компоненту:

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

Сада можемо да прикажемо садржај децокомпоненте у родитељској. Зато у фајлу са темплејтом родитеља треба да напишемо посебну ознаку, чије је име задато у својству selector декоратора @Component дете компоненте. У нашем случају то је ознака app-user. Написаћемо је у темплејту родитеља:

some text
<app-user></app-user>

Генеришите компоненту ProductComponent. Повежите ту компоненту са главном компонентом вашег пројекта.

Унесите измене у темплејт децокомпоненте. Уверите се да су примене у прегледачу.

Промените CSS стилове децокомпоненте. Уверите се да су примене у прегледачу.

У децокомпоненти направите својства name и price. Прикажите њихове вредности у темплејту децокомпоненте.