It is a way how to push data from actions/source to the HTML controls and from HTML controls/ user controls to actions. Without a framework this is a very tedious and error prone task even to any experienced programmer.
Here Angular supports data binding, provides a mechanism for binding component and the template HTML. It provides a very easy way to coordinate template with a component. And markup to the template HTML.
Angular provides four forms to bind data.
Direction shows the flow of data.
1. {{ User.name }} – This is called interpolation, it displays value of User.name from component.
2. [ property ] – It is a property binding which is also one way. It says that data flows into it. [ property ] – it is the property of a view element whose value is set to a template expression. The brackets tells the Angular to evaluate the expression.
If you omit the [] brackets Angular treats it as a constant and initializes the target property with the string. Meaning it does not do the evaluation.
3.(event) – It is the event binding. It says that data flows out of it. It calls the component’s method when an event is happened.
Example: (click) = “selectedUSer(user)”. It means that when a user clicks on a user from a list of users , selected(User) method which is defined in the component is gets invoked.
4. [{}] – It tells Angular that it is a “two-way data binding. This combines property binding and event binding in a single notation using ng-model directive. [{ng-model}].
Note:
- Data Binding helps to communicate Template and its Component
- And also with parent and child component