Angular 14 Componentler Arası İletişim

Mustafa Seker

Merhaba,

Günümüz UI Frameworklerinin çoğu birbirinden bağımsız olacak şekilde component yapılarından oluşmaktadır. Parçadan bütüne giden bir yaklaşım ile single page uygularımızı oluşturmaktayız. Böylece uygulamanın kodsal yönetimi, akışı ve tasarlanması daha sağlıklı bir şekilde yapılmaktadır.

Durum böyle olunca bir çok kütüphane, bileşen ve değişkenler söz konusu olmakta ve işimizi kolaylaştırmaktadır.

Bu yazım Angular mimarisinde önemi yüksek olan componentler arası iletişimde @Input ve @Output kavramları üzerinde duracağız ve nasıl bir rol aldıklarını inceleyelim.

Bu yapıların daha iyi anlaşılması ve component yapısının nasıl olması gerektiğini anlamak için örnek bir Angular projesi üzerinden gidelim.

Öncelikle bir Angular projesi açalım.

Gerekli ilerlemeleri sağladıktan sonra iki adet component oluşturalım.

Şimdi önemli olan hangi componentin Parent hangisinin Child olacağına karar vermek. Bu tamamen sizin kurguladığınız yapıya göre değişiklik gösterebilir. Biz şu an için X componentini parent olarak alalım ve Y componentini X’e referans vererek onun child olduğunu belirtelim.

Artık @Input ve @Output terimlerini kodumuzda kullanmaya başlayabiliriz.

@Input

Parent componentten(X) Child componente(Y) veri göndermek için kullanılan değişkendir.

y.component.ts içeriği

x.component.html içeriği

Consol ekranında görelim

Burada görüldüğü üzere Y componenti içerisindeki @Input data değişkenine attribute seviyesinde bir erişim sağlamaktadır. Artık ihtiyacımıza göre data değişkenini şekillendirebiliriz.

@Output

Child componentten(Y) Parent componente(X) veri göndermek için kullanılan değişkendir.

y.component.ts içeriği

x.component.html içeriği

Burada görüldüğü üzere y.component.ts içerisinde tanımladığımız @Output türündeki “myevent” değişkeni x.component.html içerisindeki referansında event olarak kullanılabilmektedir. Gönderdiğimiz değeri ise $event parametresiyle yakalayabiliyoruz.

x.component.ts içeriği

Consol ekranında görelim

Bu şekilde Parent ve Child componentler arası iletişimi @Input ve @Output parametreleri sağlamış bulunmaktayız.

Bu işlemin yaşam döngüsü basitçe aşağıdaki gibidir.

Sonraki yazılarımda görüşmek üzere.

İyi çalışmalar.

Mustafa Şeker