Angular'da Alt Bileşene Veri Aktarımı

Ebeveyn bileşenden alt bileşene veri aktarabilirsiniz. Bu veriler alt bileşen sınıfının özelliklerine gelecektir. Bunun nasıl yapıldığına bir göz atalım.

Başlangıç olarak, ebeveyn bileşenden verilerin aktarılacağı alt bileşen sınıfında özellikler oluşturalım:

app/user/user.component.tsclass UserComponent {
  public name: string = '';
  public age: number = 0;
}

Şimdi bu özelliklere dışarıdan veri gireceğini bildirmemiz gerekiyor. Bunun için özel bir dekoratör olan Input kullanılır. Onu alt bileşenimize içe aktaralım:

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

Şimdi bu dekoratörü özelliklerimiz için uygulayalım:

app/user/user.component.tsclass UserComponent {
  @Input()
  public name: string = '';
  
  @Input()
  public age: number = 0;
}

Alt bileşenin şablon dosyasına veri çıktısı ekleyelim:

app/user/user.component.html<p>{{ name }}</p>
<p>{{ age }}</p>

Şimdi ebeveynin şablonunda, alt bileşen etiketi çağrılırken, isimleri alt bileşen sınıfımızın özellik isimleriyle eşleşen nitelikler yazalım. Bu niteliklerin değerleri alt bileşen sınıfının özelliklerine aktarılacaktır:

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