Binding

 Data Binding : Veri modeli ile templateler arasında veri akışını dinamik bir şekilde sağlarız. Böylece uygulamalardaki verisel değişiklikler otomatik olarak sayfalara yansıtılabilmektedir. Örneğin product.component.ts dosyası içerisinde bir product değişkenin durumunda bir değişiklik olursa bu product.component.html sayfasına otomatik olarak yansıtır.

Data binding çif tönlü olarak çalışmaktadır. Yani veri modeli güncellendiği zaman template'te, template güncellendiği zaman ise veri modeline anında yansıtılmaktadır.(two way data binding)

Örneğin bir create order formumuz olsun. Bu form üzerinden ilgili alanlar doldurulmaya başladığında otomatik olarak da product.component.ts içerisindeki veri modeli güncellenmektedir.

Binding Çeşitleri

1- Text İnterpolation

Template içerisinde, Component Class'ı içerisinde tanımlı olan bir field/property değerinin yazdırılması için kullanılan Binding yöntemidir. name değeri değiştikçe html içindeki alan değişir.

2- Property Binding

Template içerisindeki HTML nesneleri veya directive'ler için Component Class'ında tanımlı olan verilerin property olarak direkt bağlanmasını sağlayan yöntemdir. propertyler template içerisinde [] (köşeli parantez) içinde belirtilir.

Örneğin dışarıdan title isminde bir input değişkeni alan home.component.ts sınıfımız olsun. home.component.html içerisindede bu değişken ekrana yazdırılsın. App.component.html sınıfı içerisinde de yukarıdaki home.component.ts sınıfını içersin. home.component.ts sınıfın ihtiyaç duyduğu dışarıdan gelmesi beklenen title değişkeni aşağıdaki app.component.ts sınıfı içinde tanımlanır ve daha app.component.html sınıfı içerisinden çağırılan home componentine parametre olarak geçilir.

3- Event Binding

3- Two-Way Data Binding ->  [(ngModel)]

Template içerisindeki bir HTML nesnesinin değeri değiştiğinde, o nesneyle bind edilmiş olan Component Class'ı içerisindeki fiedl/property değerinin anlık olarak değiştirilmesini ve aynı zamanda tam tersi durumunda geçerli olmasını sağlayan yöntemdir. [(ngModel()] kullanılır. Bu directive'nin kullanılabilmesi uygulamanın ana modulu(app.module.ts) sınıfı içerisinde FormModule eklenmelidir.

örnek kullanım