Angularda Alt Komponentler

Derslinin en basinda qeyd olundugu kimi, Angular-da butun layhe komponentlere bolunur. Evvelki derslerde biz yalniz standart olaraq yaradilan esas komponentle isledik. Gelin indi alt komponentler yaratmagi oyrenek.

Yeni komponentlerin kodu xususi terminal komandasi: generate component vasitesile Angular terefinden avtomatik generasiya olunur. component sozunden sonra yeni komponentimizin adini yazmaliyiq. Tutaq ki, biz user komponentini generasiya etmek isteyirik:

ng generate component user

Komandanin icra edilmesinden sonra gorəceyik ki, bizde yeni app/user qovlug-u peyda oldu. Onun icinde komponentin butun standart fayllari yerlesecek.

user.component.ts komponent faylinda komponent dekoratoru avtomatik yaradilacaq:

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

Hemcinin bu faylda komponentin klassi avtomatik yaradilacaq:

export class UserComponent {

}

Indi bizim alt komponenti ana komponente baglamaliyiq. Tutaq ki, ana komponent freymvorkun quraşdırılmasında movcud olan app komponentidir. Ona komponentimizi import edek:

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

Komponent dekoratorunda imports acarinda import etdiyimiz komponenti qeyd edek:

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

Indi biz alt komponentin mezmununu ana komponentde gostere bilerik. Bunun ucun ananin templat faylinda, adi selector xassəsinde @Component dekoratorunda teyin olunan xususi teqi yazmaliyiq. Bizim halda bu app-user teqidir. Onu ananin templatinda yazaq:

bir metn
<app-user></app-user>

ProductComponent komponentini generasiya edin. Bu komponenti layhenizin esas komponentine baglayin.

Alt komponentin templatinda deyisiklikler edın. Brauzerde onlarin tetbiq olunduguna emin olun.

Alt komponentin CSS stillerini deyisin. Brauzerde onlarin tetbiq olunduguna emin olun.

Alt komponentde name ve price xasseleri yaradin. Onlarin deyerlerini alt komponentin templatinda gosterin.