Komponentët Fëmijë në Angular

Siç u përmend në fillim të tutorial-it, në Angular i gjithë projekti ndahet në komponentë. Në mësimet e mëparshme kemi punuar vetëm me komponentin kryesor, të krijuar si parazgjedhje. Tani le të mësojmë si të krijojmë komponentë fëmijë.

Kodi i komponentëve të rinj gjenerohet automatikisht nga Angular duke përdorur një komandë të veçantë të terminalit: generate component. Pas fjalës component duhet të shkruajmë emrin e komponentit tonë të ri. Le të supozojmë se duam të gjenerojmë komponentin user:

ng generate component user

Pas ekzekutimit të komandës do të shohim se u shfaq një dosje e re app/user. Në të do të gjenden të gjithë skedarët standard të komponentit.

Në skedarin e komponentit user.component.ts do të krijohet automatikisht dekoratori i komponentit:

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

Gjithashtu, në këtë skedar do të krijohet automatikisht klasa e komponentit:

export class UserComponent {

}

Tani komponentin tonë fëmijë duhet ta lidhim me komponentin prind. Le të jetë prindi komponenti app, i pranishëm fillimisht pas instalimit të framework-ut. Le ta importojmë komponentin tonë në të:

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

Në dekoratorin e komponentit, te çelësi imports do të tregojmë komponentin tonë të importuar:

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

Tani mund të shfaqim përmbajtjen e komponentit fëmijë në komponentin prind. Për këtë, në skedarin me template-in e prindit duhet të shkruajmë një tag të veçantë, emri i të cilit është vendosur në vetinë selector të dekoratorit @Component të fëmijës. Në rastin tonë ky është tag-u app-user. Le ta shkruajmë atë në template-in e prindit:

disa tekst
<app-user></app-user>

Gjeneroni komponentin ProductComponent. Lidheni këtë komponent me komponentin kryesor të projektit tuaj.

Bëni ndryshime në template-in e komponentit fëmijë. Sigurohuni që ato do të zbatohen në shfletues.

Ndryshoni stilet CSS të komponentit fëmijë. Sigurohuni që ato do të zbatohen në shfletues.

Në komponentin fëmijë krijoni vetitë name dhe price. Shfaqni vlerat e tyre në template-in e komponentit fëmijë.