The Angular binding infrastructure
Most modern JavaScript frameworks today come with strong model-view binding support, and Angular is no different. The primary aim of any binding infrastructure is to reduce the boilerplate code that a developer needs to write to keep the model and view in sync. A robust binding infrastructure is always declarative and terse.
The Angular binding infrastructure allows us to transform template (raw) HTML into a live view that is bound to model data. Based on the binding constructs used, data can flow and be synced in both directions: from model to view and view to model.
The link between the component's model and its view is established using the template or templateUrl property of the @Component decorator. With the exception of the script tag, almost any piece of HTML can act as a template for the Angular binding infrastructure.
To make this binding magic work, Angular needs to take the view template, compile it, link it to the model data, and keep it in sync with model updates without the need for any custom boilerplate synchronization code.
Based on the data flow direction, these bindings can be of three types:
- One-way binding from model to view: In model-to-view binding, changes to the model are kept in sync with the view. Interpolations, property, attribute, class, and style bindings fall in this category.
- One-way binding from view to model: In this category, view changes flow towards the model. Event bindings fall in this category.
- Two-way/bidirectional binding: Two-way binding, as the name suggests, keeps the view and model in sync. There is a special binding construct used for two-way binding, ngModel, and some standard HTML data entry elements such as input and select support two-way binding.
Let's understand how to utilize the binding capabilities of Angular to support view templatization. Angular provides these binding constructs:
- Interpolations
- Property binding
- Attribute binding
- Class binding
- Style binding
- Event binding
This is a good time to learn about all these binding constructs. Interpolation is the first one.