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 тегі. Оны ата-ананың темплейтінде жазайық:

кіейін мәтін
<app-user></app-user>

ProductComponent компонентін жасаңыз. Осы компонентті жобаңыздың басты компонентіне қосыңыз.

Балаңыз компоненттің темплейтіне өзгерістер енгізіңіз. Олар браузерде қолданылатынына көз жеткізіңіз.

Балаңыз компоненттің CSS стильдерін өзгертіңіз. Олар браузерде қолданылатынына көз жеткізіңіз.

Балаңыз компонентте name және price қасиеттерін жасаңыз. Олардың мәндерін балаңыз компоненттің темплейтінде шығарыңыз.