In angular 2.0 binding syntax has changed a bit. Data binding between component and DOM can be achieved in following manner as shown below, each of these data binding types have specific syntax.
- Interpolation – It is one way in from component to DOM. It evaluates expression between 2 curly braces
They are not editable and the value does not go back to the component. Very useful for read only expressions. What @ property binding to DOM attributes, in older angular we attributes prefixed with ng-* like ng-src etc, this changes in Angular 2.0, it looks some thing like this
You can take any HTML5 property and bind to it. You can bind to custom properties in directives as well. In summary you can bind to element, component or directive property.
- Event binding – This is reverse flow from DOM to component. Inward data flow from component was denoted with open close square brackets, reverse flow through event bindings from DOM to component is round brackets like show below
It executes an expression when and event occurs.
- Two way data binding – It is value in and value out. For two way binding we have a special directive called ngModel
We want to allow value to come in that’s reason we have square bracket and we want passback the updated value to component that’s reason we circular brackets.