Data direction | Syntax | Binding type |
---|---|---|
One-way from data source to view target |
| Interpolation Property Attribute Class Style |
One-way from view target to data source |
| Event |
Two-way |
| Two-way |
<!-- Bind button disabled state to `isUnchanged` property -->
<button [disabled]="isUnchanged">Save</button>
Binding targets
The target of a data binding is something in the DOM. Depending on the binding type, the target can be an (element | component | directive) property, an (element | component | directive) event, or (rarely) an attribute name. The following table summarizes:
Binding type | Target | Examples |
---|---|---|
Property | Element property Component property Directive property |
|
Event | Element event Component event Directive event |
|
Two-way | Event and property |
|
Attribute | Attribute (the exception) |
|
Class | class property |
|
Style | style property |
|
Let’s descend from the architectural clouds and look at each of these binding types in concrete detail.