Angular ile Parent ile Child Arasında Veri Aktarımı

@Input() Nedir?

@Input(), Angular’da bir üst bileşenden (parent) alt bileşene (child) veri aktarmayı sağlayan bir dekoratördür.

Bu yapı sayesinde uygulama içerisinde component veri paylaşımı kolay ve düzenli bir şekilde yapılır.

Child component birden fazla @Input() alabilir ve bu veriler string, number, array, object gibi farklı tiplerde olabilir.

1. Parent Component Oluşturma

İlk adımda bir Parent Component oluştururuz. Bu component içerisinde child’a göndereceğimiz veriler tanımlanır.

// parent.component.ts
export class ParentComponent implements OnInit {
  isim: string | undefined;
  adresList: Adres[] = [];
}
      

2. Parent HTML ile Child’a Veri Gönderme

Parent HTML içerisinde child component çağrılır ve veri binding ile değerler aktarılır.

<!-- parent.component.html -->
<app-child 
  [isim]="isim"
  [adresList]="adresList">
</app-child>
      

Köşeli parantezler [], Angular’da property binding anlamına gelir.

3. Child Component’te @Input() Kullanımı

Child component içerisinde parent’tan gelen veriler @Input() dekoratörü ile tanımlanır.

// child.component.ts
export class ChildComponent implements OnInit {
  @Input() isim: string | undefined;
  @Input() adresList: Adres[] = [];
}
      

4. Child HTML İçinde Verileri Gösterme

Child HTML dosyasında artık parent’tan gelen veriler kolayca görüntülenebilir.

<!-- child.component.html -->
<h3>İsim: {{ isim }}</h3>
<ul>
  <li *ngFor="let adres of adresList">
    {{ adres }}
  </li>
</ul>
      

Angular template syntax sayesinde veriler dinamik olarak ekrana basılır.

@Input() Avantajları

• Component’ler arası veri paylaşımını kolaylaştırır
• Kodun yeniden kullanılabilirliğini artırır
• Temiz ve sürdürülebilir mimari sağlar

Sonuç

Angular @Input() kullanımı ile parent component’ten child component’e veri aktarmak oldukça basittir.

Bu yaklaşım, büyük ölçekli Angular projelerinde düzenli ve anlaşılır bir yapı kurmanıza yardımcı olur.