21 Temmuz 2025 Pazartesi

İnput/Output Communication | Parent to Child/Child to Parent

Angular Component Communication, Angular componentleri arasında veri ve olayları paylaşma süreçlerini ifade eden bir kavramdır. Bir sayfayı component olarak tasarlayıp daha sonra bu componentin de alt bileşenleri olarakta başka componentler tasarlayabiliyoruz. Dolayısıyla bu componentler aralarında iletişim kurma ihtiyacı duyabilirler. 


Parent to Child Communication

Parent componentten child component'e veri göndermek için kullanılan yöntemdir. @input() decorator'ü ile veri gönderilir.



 Cild Component: Herhangi bir compnent içinde selector keyiyle bereber referans edilmiş componentir.

  • ilk olarak child component içerisinde @input() decoratorü ile parantten gelmesini beklediğimiz değişkeni tanımlıyoruz. 
  • Daha sonra {{}} interpolation içerisinded ilgili değeri ekrana yazdırıyoruz.


  • parent component içerisinde child componente göndermek istediğimiz değişkeni aşağıdaki gibi name isminde tanımlıyoruz.
  • Daha sonra <app-child> selectorüne sahip child clasın içerisinde mavi çizgi ile belirtildiği gibi değişkenin değerini childa gönderiyoruz.



Child  to Parent Communication

Child componentten parent component'e veri göndermek için kullanılan yöntemdir.

@output() decoratorü ve EventEmitter sınıfı kullanılır.









Bir parent altındaki 2 child componenet kendi aralarında haberleşmesi grekirse. childdan parenta daha sonra parrenttanda ilgili childa data gönderilir.Yukarıdaki iki yapı birleştirilir. Yada state ile bu işlem yapılır.

Hiç yorum yok:

Yorum Gönder