Kalimi i të dhënave në komponentin fëmijë në Angular

Është e mundur të kalosh të dhëna nga komponenti prind në komponentin fëmijë. Këto të dhëna do të depërtojnë në vetitë e klasës së fëmijës. Le të shohim se si bëhet kjo.

Për fillim, le të krijojmë në klasën e komponentit fëmijë vetitë, në të cilat do të importohen të dhënat nga komponenti prind:

class UserComponent {
	public name: string = '';
	public age: number = 0;
}

Tani na duhet të deklarojmë se në këto veti nga jashtë do të depërtojnë të dhëna. Për këtë përdoret dekoratori i veçantë Input. Le ta importojmë atë në komponentin tonë fëmijë:

import { Input } from '@angular/core';

Dhe tani le ta aplikojmë këtë dekorator për vetitë tona:

class UserComponent {
	@Input()
	public name: string = '';
	
	@Input()
	public age: number = 0;
}

Le të shtojmë shfaqjen e të dhënave në skedarin e template-it të komponentit fëmijë:

<p>{{ name }}</p>
<p>{{ age }}</p>

Dhe tani në template-in e prindit, kur therrasim tagin e komponentit fëmijë, le të shkruajmë atributet, emrat e të cilëve do të përputhen me emrat e vetive tona të klasës së fëmijës. Vlerat e këtyre atributeve do të depërtojnë në vetitë e klasës së fëmijës:

<user-data name="john" age="25"></user-data>