Essentially, in ASP.NET MVC, you do data binding to a model class. On the other hand, in WPF, you have data binding modes available. You can set the mode of data binding in XAML, as follows:<\/p>\n\n\n\n
- \n
- One-way data binding<\/li>\n\n\n\n
- Two-way data binding<\/li>\n\n\n\n
- One-time data binding<\/li>\n\n\n\n
- One-way to source data binding<\/li>\n<\/ol>\n\n\n\n
If you are following MVVM patterns, then you might be using INotifyPropertyChanged interface to achieve two-way data binding. Therefore, there are many ways data bindings are achieved in world of .NET.<\/p>\n\n\n\n
Data binding in Angular, however, is much simpler.<\/p>\n\n\n\n
If you are extremely new in Angular, then let me introduce you to Components. In Angular applications, what you see in the browser (or elsewhere) is a component. A component consists of the following parts:<\/p>\n\n\n\n
- \n
- A TypeScript class called Component class<\/li>\n\n\n\n
- A HTML file called Template of the component<\/li>\n\n\n\n
- An optional CSS file for the styling of the component<\/li>\n<\/ol>\n\n\n\n
![\"](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/8880.abc.png\" "\\"A")
<\/figure>\n\n\n\nIn Angular, Data Binding determines how data will flow in between Component class and Component Template.<\/p>\n\n\n\n
Angular provides us three types of data bindings. They are as follows:<\/p>\n\n\n\n
- \n
- Interpolation<\/li>\n\n\n\n
- Property Binding<\/li>\n\n\n\n
- Event Binding<\/li>\n<\/ol>\n\n\n\n
![\"Angular](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/2514.IMG2.PNG\" "\\"provides")
<\/figure>\n\n\n\nLet\u2019s see each one by one.<\/p>\n\n\n\n
Interpolation <\/h2>\n\n\n\n
Angular interpolation is one-way data binding. It is used to pass data from component class to the template. The syntax of interpolation is {{propertyname}}.<\/strong><\/p>\n\n\n\n
Let\u2019s say that we have component class as shown below:<\/p>\n\n\n\n
export\u00a0class\u00a0AppComponent\u00a0{\n \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0product\u00a0=\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title:\u00a0'Cricket\u00a0Bat',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0price:\u00a0500\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0};\n \n\u00a0\u00a0}<\/pre>\n\n\n\nWe need to pass the product from the component class to the template. Keep in mind that to keep example simple, I\u2019m hard coding the value of the product object, however, in a real scenario, data could be fetched from the database using the API. We can display value of the product object using interpolation, as shown in the listing below:<\/p>\n\n\n\n
<h1>Product<\/h1>\n<h2>Title\u00a0:\u00a0{{product.title}}<\/h2>\n<h2>Price\u00a0:\u00a0{{product.price}}<\/h2><\/pre>\n\n\n\nUsing interpolation, data is passed from the component class to the template. Ideally, whenever the value of the product object is changed, the template will be updated with the updated value of the product object.<\/p>\n\n\n\n
In Angular, there is something called ChangeDetector<\/strong> Service, which makes sure that value of property in the component class and the template are in sync with each other.<\/p>\n\n\n\n
Therefore, if you want to display data in Angular, you should use interpolation data binding.<\/p>\n\n\n\n
Property Binding <\/h2>\n\n\n\n
Angular provides you with a second type of binding called \u201cProperty Binding\u201d. The syntax of property binding is the square bracket []. It allows to set the property of HTML elements on atemplate with the property from the component class. <\/u><\/strong><\/p>\n\n\n\n
So, let\u2019s say that you have a component class like the one below:<\/p>\n\n\n\n
export\u00a0class\u00a0AppComponent\u00a0{\n\u00a0\u00a0\u00a0btnHeight\u00a0=\u00a0100;\n\u00a0\u00a0\u00a0btnWidth\u00a0=\u00a0100;\n}<\/pre>\n\n\n\nNow, you can set height and width properties of a button on template with the properties of the component class using the property binding.<\/p>\n\n\n\n
<button\u00a0\n\u00a0\u00a0[style.height.px]\u00a0=\u00a0'btnHeight'\n\u00a0\u00a0[style.width.px]\u00a0=\u00a0'btnWidth'\u00a0>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Add\u00a0Product\n<\/button\u00a0><\/pre>\n\n\n\n
Angular Property Binding is used to set the property of HTML Elements with the properties of the component class. You can also set properties of other HTML elements like image, list, table, etc. Whenever the property\u2019s value in the component class changes, the HTML element property will be updated in the property binding.<\/p>\n\n\n\n
Event Binding <\/h2>\n\n\n\n
Angular provides you third type of binding to capture events raised on template in a component class. For instance, there\u2019s a button on the component template and, on click of the button, you want to call a function in component class. You can do this using Event Binding. The syntax behind Event Binding is (eventname).<\/strong><\/p>\n\n\n\n
For this example, you might have a component class like this:<\/p>\n\n\n\n
export\u00a0class\u00a0AppComponent\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0addProduct()\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log('add\u00a0product');\n\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0}<\/pre>\n\n\n\nYou want to call addProduct function on the click of the button on the template. You can do this using event binding:<\/p>\n\n\n\n
<h1>Product<\/h1>\n<button\u00a0(click)='addProduct()'>\n\u00a0\u00a0\u00a0\u00a0Add\u00a0Product\n<\/button><\/pre>\n\n\n\n
You can do event binding with all events of a HTML elements which is part of Angular ngZone. You can learn more about it here<\/a>.<\/span><\/p>\n\n\n\n
Angular provides you these three bindings. In event binding, data flows from template to class and, in property binding and interpolation, data flows from class to template.<\/p>\n\n\n\n
![\"](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/2514.image3.png\" "\\"in")
<\/figure>\n\n\n\nTwo-Way Data Binding <\/h2>\n\n\n\n
Angular does not have built-in two-way data binding, however, by combining Property Binding and Event Binding, you can achieve Two-Way Data Binding.<\/p>\n\n\n\n
![\"](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/5228.tr.PNG\" "\\"Two-Way")
<\/figure>\n\n\n\nAngular provides us a directive, ngModel,<\/strong> to achieve two-way data binding, and It\u2019s very easy to use. First, import FormsModule and then you can create two-way data binding:<\/p>\n\n\n\n
export\u00a0class\u00a0AppComponent\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0name\u00a0=\u00a0'foo';\n\u00a0}<\/pre>\n\n\n\nWe can two-way data bind the name property with an input box:<\/p>\n\n\n\n
<input\u00a0type=\"text\"\u00a0[(ngModel)]='name'\u00a0\/>\n\n<h2>{{name}}<\/h2><\/pre>\n\n\n\nAs you see, we are using [(ngModel)] to create two-way data binding in between input control and name property. Whenever a user changes the value of the input box, the name property will be updated and vice versa.<\/p>\n\n\n\n
As a .NET developer, now you might have realized that data binding in Angular is much simpler, and all you need to know is four syntaxes. I hope you find this post useful and, in further posts, we will cover other topics of Angular. <\/p>\n\n\n\n
<\/span>If you like this post, please share it. Also, if you have not checked out <\/span>Infragistics Ignite UI for Angular Components<\/a>, be sure to do so! They have 30+ material based Angular components to help you code web apps faster.<\/span><\/p>\n\n\n\n