Angular @Input() ve @Output() Decoratorleri
Herkese merhaba,
Bugün sizlere Angular’da componentler arasında veri transferi olarak kullanılan metotlardan biri olan @Input ve @Output dekoratörünü anlatacağım. Anlatımımda öncelikle ilgili terimlerden bahsedeceğim daha sonrasında ise örnek bir proje üzerinden bu iki dekoratörün kullanımı ile ilgili bilgi aktaracağım.
Aslında Angular’da componentler arasında veri transferi bir kaç farklı şekilde sağlanabilmektedir.
Bunlar;
1-Local Storage
2-@Input(), @Output()
3-State Management(NGXS vb.)
Biz bugün bunlardan @Input ve @Output’ı göreceğiz.
Yapıyı kullanabilmemiz için öncelikle kod yapısının yukarıdaki gibi olması gerekmektedir. Parent ve child componentlerin olması gerekmektedir.
@Input Nedir?
@Input dekoratorü ile parent componentten, child componente veri gönderebiliriz. Gönderilen veriyi child componentte @Input şeklinde değişken ile yakalayabiliriz.
!Not: Bir @Input() özelliğindeki değişiklikleri izlemek için Angular’ın yaşam döngülerinden biri olan OnChanges’ı kullanırız. OnChanges, @Input() dekoratörüne sahip özelliklerle çalışmak üzere özel olarak tasarlanmıştır. Proje örneğinde de ngOnChanges fonksiyonu üzerinden detaylı olarak göreceğiz.
@Output Nedir?
Output dekoratörü ile child componentten, parent componente data gönderimi olur. @Output dekoratöründe event emitterler kullanılmaktadır.
Proje Üzerinden Anlatım;
Proje ile @Input ve @Output dekoratörü kullanarak telefon rehberi projesi geliştireceğim. Projeyi geliştirirken adım adım dekoratörleri anlatacağım.
Projedeki senaryo;
Kullanıcı ismi ve telefon numarası girilen iki ayrı input bulunmaktadır. İnputlar person isimli parent componentte bulunmaktadır. İnputlara girilen veriler child componenti olan person-detail ekranına @Input dekoratörü ile gönderilir. Person detail ekranında bu veriler listelenir. Person detail’de tıklanan kişi bilgisi de @Output dekoratörü ile person parent’ına yollanır ve burada ilgili isim ve telefon inputlarına set edilir.
Projede öncelikle
ng g c person
ng g c person-detail
olmak üzere iki component oluşturuyoruz.
Person componenti parent, person detail componenti ise child component olacaktır.
person.component.html’i yukarıdaki gibi görünmektedir. Senaryoda bahsettiğimiz üzere burada iki adet name ve phone isminde inputlar tanımlanmıştır. Alt kısımda da <app-person-detail></app-person-detail> etiketileri arasında child componenti çağrılmıştır. [personList] @Input’u ile person componentinden person-detail componentine veri gönderilmiştir.
person-detail.component.ts 11. satırda @Input dekoratörü ile değer alınarak ngOnChanges kısmında sayfadaki bir değişkene set edilmiştir.
person-detail.component.html’den tıklanan elaman ile sendData fonksiyonu ile person-detail.component.ts’inden @Output ile parent olan person componentine person datasını göndererek seçilen verinin üst componentine gönderimi sağlanır.
person-detail.component.ts ile gönderilen veri getPerson metodunu tetikler ve inputlara değer atama işlemi gerçekleştirilir.
Yazımı okuduğunuz için teşekkür ederim. Projeyi incelemek isteyenler için GitHub linki; https://github.com/sercan46/Angular-inputAndOutputDecorator
Bir sonraki yazımda görüşmek üzere :)
