Binding coordinates state transfer between the component's class and its template. The following table shows the different types of Angular data bindings.
| Type | Description | Direction | Example |
|---|---|---|---|
| Interpolation | Evaluates the expression between the double curly braces. | One-way (Component→Template) | <h1>{{header}}</h1> |
| Property Binding | Updates 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 Binding | Updates 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 Binding | Normally 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'/> |
Leave a Reply