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:

app/user/user.component.tsclass 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ë:

app/user/user.component.tsimport { Input } from '@angular/core';

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

app/user/user.component.tsclass 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ë:

app/user/user.component.html<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:

app/app.component.html<user-data name="john" age="25"></user-data>