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']
})

Энди биз бола компонентнинг муҳтасинини ота компонентда чиқаришимиз мумкин. Буни учун отанинг темплейт файлида махсус тег ёзишимиз керак, унинг номи @Component декораторининг selector хусусиятида берилган. Бизнинг ҳолатимизда бу app-user тегидир. Уни отанинг темплейтида ёзамиз:

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

ProductComponent компонентини генерация қилинг. Ушбу компонентни лойиҳангизнинг асосий компонентига уланг.

Бола компонентнинг темплейтига ўзгартириш киритинг. Улар браузерда қўлланилганига ишонч ҳосил қилинг.

Бола компонентнинг CSS стилларини ўзгартиринг. Улар браузерда қўлланилганига ишонч ҳосил қилинг.

Бола компонентда name ва price хусусиятларини яратинг. Уларнинг қийматларини бола компонентнинг темплейтида чиқаринг.