Binding coordinates state transfer between the component's class and its template. The following table shows the different types of Angular data bindings.

TypeDescriptionDirectionExample
InterpolationEvaluates the expression between the double curly braces.One-way

(Component→Template)
<h1>{{header}}</h1>
Property BindingUpdates the property if there's a change from the bound component state.

This is typically denoted by the square bracket surrounding the target property.
One-way

(Component→Template)
<img [src]='imageURL'/>
Event BindingUpdates the bound component state if an event's was fired.

This is typically denoted by the parenthesis surrounding the event property.
One-way

(Component←Template)
<button (click)='onSave'>Save</button>
Two-Way BindingNormally use with the form elements.

This is typically denoted by the combined square and parenthesis surrounding the ngModel property.
Two-way

(Component↔Template)
<input type='text' [(ngModel)]='name'/>