Types of Binding in Angular

Binding is used to bind the model properties and controller functions to the View. Let us now see the different types of bindings offered by Angular.

Angular provides 4 different types of binding.

1. Interpolations

2. Property Binding

3. Event Binding

4. Two way binding

Interpolation represents simple one way data binding from the model to the view using the expression {{}}. Interpolation is used to display text/message from the model to the view.
{{varName}}

Property binding is also one way data binding from model to the view, unlike interpolations they don’t display text/message, they are used to bind properties to controls in the view page. Example property binding can be used to set the image source property of an <img> tag.
<img [src] = 'product.imageUrl'>

Event binding is one way binding from the view to the model, as the name suggests event binding is used to handle events raised from the view, the events are bound to the handler in the Component class. Example is binding a buttons click event with its handler.
<button (click) = 'handleClick()'>

Two way binding is binding from the model to the view and view to model. This is nothing but the ng-model directive in AngularJS, this updates model changes to the view and view changes to the Model. Example is binding a text box value to a property in the Component class.
<input [(ngModel)] = 'productName'>