Angular-da çaga komponentler

Okuw kitabynda başynda aýdylan ýaly, Angular-da tutuş taslama komponentlere bölünýär. Öňki sapaklarda diňe başlangyçda döredilen esasy komponent bilen işledik. Indi çaga komponentleri döretmegi öwreneliň.

Täze komponentleriň kody Angular tarapyndan ýörite terminal buýrugy bilen awtomatik döredilýär: generate component. component sözünden soň täze komponentimiziň adyny ýazmaly. Diýeliň biz user komponentini döretmek isleýäris:

ng generate component user

Buýrugy ýerine ýetirenden soň app/user atly täze bukda dörendigini göreris. Onda komponentiň ähli standart faýllary bolar.

user.component.ts komponent faýlynda komponent dekoratory awtomatik dörediler:

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

Şeýle hem bu faýlda komponent klassy awtomatik dörediler:

export class UserComponent {

}

Indi çaga komponentimizi ene komponente birikdirmeli. Ene komponent app bolsun, fremwork gurnalanda işjeň bolýar. Ona komponentimizi import edeliň:

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

Komponent dekoratorynda imports açar sözünde import edilen komponentimizi görkezeliň:

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

Indi çaga komponentiň mazmunyny ene komponentde görkezip bileris. Bunuň üçin eneniň şablon faýlynda ýörite teg ýazmaly, onuň ady @Component dekoratorynyň selector häsiýetinde kesgitlenýär. Bizim ýagdaýymyzda bu app-user tegidir. Ony enäniň şablon faýlyna ýazalyň:

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

ProductComponent komponentini dörediň. Bu komponenti taslamanyň baş komponentine birikdiriň.

Çaga komponentiň şablonyna üýtgeşmeler giriň. Olaryň brauzerde ýüze çykandygyna göz ýetiriň.

Çaga komponentiň CSS stillerini üýtgediň. Olaryň brauzerde ýüze çykandygyna göz ýetiriň.

Çaga komponentde name we price häsiýetlerini düzüň. Olaryň bahalaryny çaga komponentiň şablonynda görkeziň.