Data Binding Angular 1 vs Angular 2

Data Binding pada angular merupakan salah satu fitur yang paling saya sukai. Two ways data binding yang sangat mudah digunakan membuat hidup ini berasa lebih mudah, terutama bagi saya yang tidak menyukai javascript maupun jquery.

Two Way Data Binding merupakan konsep yang diusung oleh angular sejak angular 1.

Model dan View akan terus menerus melakukan sync sehingga data yang diupdate baik dari controller maupun view akan saling mengupdate dan selalu sama. Angular1 menggunakan sebuah variable bernama $scope untuk menjadi penjembatan antara model dan view. Semua data yang berada dalam $scope akan selalu diawasi. Hal itu membuat model dan view selalu sync satu sama lainnya, tetapi jangan berpikir bahwa itu semua semanis kelihatannya. Yap, angular melakukan watch pada semua variable $scope yang aktif dan tentunya menghabiskan resource yang cukup besar. Sebuah kesalahan kecil seperti melakukan reuse variable $scope pada html yang sedang di hide saja bisa menyebabkan rendering behind the view yang luar biasa hingga menyebabkan freeze padahal hanya untuk mendisplay ( yap, saya pernah mengalaminya )

Lalu bagaimana dengan Angular2?
Berikut sample code agar lebih mudah di cerna : 

<div>{{article.name}}</div>
<article-detail [article]="selectArticle"></article-detail>
<div (click)="selectArticle(article)"></div>

Pada angular 2 terdapat 3 macam data binding : 

Data Binding Angular 2

• Interpolation : {{article.name}}interpolation berfungsi untuk menampilkan value dari component pada div biasa
• Property Binding : [article]
  property binding berfungsi untuk menampilkan value dari component pada property, atau dari parent ke child
• Event Binding : (click)
  Event Binding berfungsi untuk mengirim data dari view menuju component

Lalu dari ketiga macam tipe binding yang disediakan Angular 2. Terdapat juga two way data binding yang merupakan kombinasi dari property binding dan event binding yang merupakan bentuk dari Two Data Binding Angular 2. 

<input [(ngModel)]="article.name">

Pada Two Way Data Binding, Angular menggabungkan property dan event binding. Perubahan yang dilakukan oleh user akan dikirim ke component melalui event binding, sedangkan Perubahan pada component akan dikirim menggunakan property binding. Hal tersebut membuat angular tidak perlu melakukan watch pada suatu variable melainkan melakukan aktivitas ketika ada triger baik dari component maupun dari view. Hal yang sama juga dapat dilakukan antar parent dan child component.

Two Way Data Binding Angular 2

Angular 2 telah memberikan solusi yang lebih baik untuk masalah performance data binding yang terjadi pada Angular sebelumya. Dan tentunya kita dapat tetap berbahagia tanpa perlu repot memproses two data binding sendiri. Sekian saja untuk kesempatan kali ini.

Sampai berjumpa pada kesempatan berikutnya. Happy Coding :D