Детски компоненти во Angular

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

Кодот на новите компоненти автоматски се генерира од Angular со помош на специјална наредба во терминалот: 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. Прикажете ги нивните вредности во темплејтот на детската компонента.