In the last Tech-talk, we discussed the Architecture of Angular2.x., more specifically, how it looks and some of it’s major components. Today we will be discussing all the types of Bindings in Angular.
What are Bindings?
Bindings are used to bind JavaScript object with HTML UI and vice versa in Angular 2.x application.
Types of Bindings in Angular 2.x
There are 4 types of Bindings in Angular 2.x
- One way
- Two way
- Interpolation
- Template
Again One-way binding can be categorized into two parts:
- OBJECT TO UI
- UI TO OBJECT
- One-way binding:
- Object to UI: The square bracket “[]” represents data flow from Object to UI.
- UI TO OBJECT: The round bracket “()” represents data flow from UI to object. The value is carried over from UI to object by certain events take place in UI.
E.g.: If we want to move the text box value to a JavaScript object property like CustomerName on input event of text box then we need to write syntax like “(input)”.
- Two-way binding:
The above syntax for object to UI and vice-versa i.e. the square and round bracket jointly “[()]” represents two-way binding.
- Interpolation:
When we are mixing up the JavaScript object’s property values with HTML, it’s called Interpolation. Generally, expression represented by “{{}}” represents the interpolation.
- Template Binding:
The template binding represents by ‘*’.
E.g.: the ‘for’ loop syntax in Angular 2.x represents the template binding. Here a fixed template section is looped to display the data in multiple rows and that’s why we need to put ‘*’ in ‘ngFor’ statement—i.e. ‘*ngFor’.
Conclusion:
This is a very small and useful tech-talk related to all the various types of bindings in Angular 2.x. You can use this as a handy information tool. In the subsequent Tech talks we will explore some very interesting features of Angular 2.x. Stay tuned and keep following us! Be sure to email us at info@netwoven.com for more information!
