Angular Data Binding Nedir ve Nasıl Kullanılır ?

Angular Data Binding

Angular Eğitim Serisine “Angular Data Binding” konulu yazı ile devam edeceğim. Bir önceki yazımda “Angular Module Nedir ve Feature Module Oluşturmak?” konulu yazıyı paylaştım ve Angular Module yapısı, AppModule ve Angular CLI ile feature module oluşturma konularını anlattım.

Bu yazımda ise Angular ‘da Data Binding nasıl yapılır ve view katmanında bu datalar nasıl kullanılır sorularına yanıt vermek istiyorum. Anlamlı ve yararlı bir yazı olacağına inanıyorum. Çok uzatmadan başlayalım. 🙂

Bu arada, Angular Eğitim Seti ile alakalı yazıların tamamına buradan ulaşabilirsiniz.

Angular Data Binding Nedir?

Data Binding, Angular’ın en güçlü özelliklerinden biridir. Typescript ile view katmanı (HTML) arasındaki iletişim için kullanılır. Angular’da data binding teknik olarak iki anabaşlıkta işlenir.

  • One-Way Data Binding
  • Two-Way Data Binding

One-Way Data Binding ‘i de teknik olarak 3 alt başlıkta inceleyeceğiz.

  1. String Interpolation
  2. Property Binding
  3. Event Binding

Angular – One-Way Data Binding (Tek yönlü data bağlanısı)

One way data binding, TypeScript kodunda değişiklik yaptığımızda HTML şablonunun değiştiği basit, tek yönlü bir iletişimdir.

One way Data Binding’i üç başlıkta ele alacağız.

one way data binding figure in angular data binding

1 – String Interpolation

String Interpolation HTML içinde dinamik verileri görüntülemek için kullanılır. Component.ts dosyasında değişiklik yapmanızı ve oradan da component’e ait html (component.html) dosyasına veri almanızı kolaylaştırır. Component.ts dosyasında kullanmak istediğimiz nesneleri html üzerinde Angular’ın render edebilmesi için {{value}} şeklinde kullanmalıyız.

Ör;
app.component.ts dosyası içinde ‘title’ parametresi oluşturuyorum.

app.component.ts

Şimdi de bu parametreyi app.component.html içinde render edelim.

app.component.html

Projeyi run edip çıktıyı incelediğimizde;

angular string interpolation figure

Angular tarafından “title” parametresinin render edildiğini görüyoruz.

“{{ }}” bloğu arasında matematiksel işlemler de yapmamız mümkün. app.component.ts dosyasında number tipinde “one” ve “two” olarak iki değişken tanımlıyorum.

app.component.ts

app.component.html

ve sonuç;

angular string interpolation number

Son olarak farklı String Interpolation yöntemlerinin bir arada olduğu örnek ile bu başlığı sonlandıralım.

  • JS expression {{}}
  • method calls {{methodCall()}}
  • Math {{x * y / z}}
  • Conditional expression
  • String concatenation {{“string1” + “string2”}}

app.component.ts

app.component.html

sonuç;

angular string interpolation all examples

2 – Property Binding

Property Binding’de, Angular içinde, one way data binding tekniklerinden biridir. Bu özelliği bir DOM nesnesinin property’sini TypeScript kodunda tanımladığımız bir alana bağlamak için kullanırız. Aslında Angular, String Interpolation özelliğini Property Binding özelliğine dönüştürür. Bu yüzden teknik olarak String Interpolation ile hemen hemen aynıdır diyebiliriz.

Örnek kullanım ;

Bu kod ile <img> objesinin “src” property’sine TypeScript class’ı içindeki içindeki “url” değişkeninin değerini render etmiş olduk.

app.component.ts

app.component.html

ve sonuç;

angular property binding result

3 – Event Binding

Bir web projesinde son kullanıcıların etkileşimi için olaylara ihtiyaç duyarız. Alttaki örneği ele alalım. Bir butonumuz var. Bu butonun “onClick” event handler’ına custom “onButtonClick” js function’ı veriyoruz. Ve butona tıklandığı zaman bu fonksiyonunun çalışmasını sağlıyoruz.

Bunu angular ile yapabilmek için “()” leri kullanmamız gerekiyor. Bir örnek ile anlatınca daha açıklayıcı olacak.

View ‘a bir button ve bir text input ekleyeceğim. Butona click event’i için, text input’a da change event’i için bir fonksiyon bind edeceğim. App.component.ts ve app.component.html dosyalarını aşağıdaki gibi güncelliyorum.

app.component.ts
app.component.html

Projeyi run edelim;

angular event binding example figure

 

Angular – Two-Way Data Binding (Çift yönlü data bağlanısı)

Two way Data Binding, Angular’ın en güçlü özelliklerinden biridir.  One way data binding’de templatedeki (view’daki) herhangi bir değişikliğin, Component.ts tarafındaki kod bloğuna yansıtılmadığını gördük. Bu sorunu çözmek için, Angular “two way data binding” ile view tarafındaki değişikliklerin typescript class’ını güncellemesini sağlar. Bu güncellemeleri anında ve otomatik olarak gerçekleşir.

Angular’ın bu özelliği sayesinde HTML şablonunun ve TypeScript kodunun her zaman güncellenmesini sağlanır.

angular two way data binding

Syntax : [(ngModel)] = “[property of component]”

Basit bir örnek ile Two Way Data Binding nasıl çalışır göstermek istiyorum;

Component’imin içine “name” isimli string bir değişken tanımlıyorum.

app.component.ts file:

Bu değişkeni önyüzde bir input içinde göstermek istiyorum. Amacım proje run olduğunda TypeScript class’ı içinde name: string = “Two Way Data Binding Example Title” tanımladığım değişkeni bind etmek. Runtime’da input içinde yaptığım değişikliğin de html file içinde <p> {{name}} </p> yazılan kod parçası içinde herhangi bir refresh işlemi yapmadan, anlık olarak güncellendiğini gözlemlemek. Sonuçta Two way data binding’in bize vaadettiği şey de tam olarak buydu, değil mi? 🙂

app.component.html file:

Ve sonuç…

angular two way data binding figure

Proje çalıştığında ekrandaki gibi değişkene default verdiğim datanın “p” elementi içine render olduğunu görüyorum. Aynı zamanda input içinde yaptığım her değişiklik anında “p” elementine yansıyor. Bunu da  Two way binding ‘e borçluyuz 🙂

 

Özet

Bu yazıda; Mobilhanem üzerinde yayımlamaya başladığım Angular Eğitim Seti yazı serisinden Angular Data Binding konusu işledik. Data Binding yöntemlerini detaylandırarak örnekler ile anlattık.

Eğer bir önceki Angular Module Nedir ve Feature Module Oluşturmak konulu yazımı okumadıysanız konu bütünlüğü açısından okumanızı tavsiye ederim.

Bir sonraki yazıda görüşmek üzere…

Yararlı Linkler

https://angular.io/guide/template-syntax

 

0

Hasan Denli

Yorum Yaz

Haftalık Bülten

Mobilhanem'de yayınlanan dersleri haftalık mail almak ister misiniz?