[TR]Angular Componentler Arası Veri Paylaşımı ( Input, Output)
Angular yapısı gereği kapsamlı ve bize mümkün oldukça çok seçenek sunar. Componentler arası haberleşme konusunda bugün seçtiğimiz INPUT ve OUTPUT. Uzun uzun yazmadan, gelin kısa bir örnek ile açıklayalım.
Yeni bir angular projesi oluşturarak işe başlıyoruz.
ng new angular-data-sharing
PrimeNG componentlerinin yararlı olduğunu düşünüyorum. Bu sebeple her projeme mutlaka import ediyorum. PrimeNG ile ilgili daha fazla bilgi almak için bu dökümantasyonu inceleyebilirsiniz.
Örnek projemizde bir form içerecek. Bu form içinde başka bir componentten gelen data table dan veri seçip üst componente aktaracağız.
ng g component hobies-form
ng g component data-table
Ve ilgili componentler için routing configurasyonlarını yapıyoruz.
Data table componentimiz içerisinde bir dialog tanımlıyoruz ve bu dialogun açılmasını sağlayan show methodu üst component tarafından kullanılacak.
Ön tanımlı 3 farklı liste oluşturuyoruz. Show methodumuz aldığı parametre ile hangi branşdaki sporları listeleyeceğine karar verecek.
Hobies-form componenti içerisinde bir reactive form ve alt componentin show fonksiyonuna gidecek bir buton tanımlıyoruz.
Bu noktadan sonra Data Table componentinde bir output ile event emitter tanımlayacağız. Event emitter ile Hobbies Form componentindeki bir fonksiyona datayı taşıyıp, tetikleyeceğiz. Burada primeNG data table’ın selection özelliğini kullanıyoruz.
@Output() public sendHobbie: EventEmitter<any> = new EventEmitter<any>();
Gönderdiğimiz veriyi hobbies-form componentinde yakalayacak bir fonksiyon yazıyoruz. Verinin içindeki type değişkenin değerine göre formun ilgili alanına set ediyoruz.
Output kullanımını gördük. Şimdide Input ile başka bir componente form verilerini taşıyıp ekrana yazdıralım.
ng g component display-data
Componentin içerisinde Input ile tipini belirtmeden bir değişken tanımlıyoruz.
@Input() public profile: any;
Template içerisinde gerekli düzenlemeleri yapıyoruz. Ve hobies-form componenti içerisinde display-data componentini
form datasını göndererek çağırıyoruz.
SONUÇ :
