Angular Data Binding

Binding data between component and template

Interpolation

{{ title }} # text interpolation
{{ count + 1 }} # expression
{{ getTotal() }} # method call

Property Binding

[src]="imageUrl" # bind property
[disabled]="isDisabled" # bind disabled state
[value]="inputValue" # bind value

Event Binding

(click)="onClick()" # bind click event
(input)="onInput($event)" # bind input event
(submit)="onSubmit()" # bind submit event

Two-Way Binding

[(ngModel)]="name" # two-way binding
// requires FormsModule import

Template Reference

<input #nameInput> # template reference variable
<button (click)="log(nameInput.value)">Log</button>