Two-way Binding
- Really just a combination of Property Binding and Event Binding
- Used in conjunction with
ngModel
Angular supports two-way data binding, meaning that changes in the DOM, such as user choices, are also reflected in your program data. This feature allows us to both read and write to a property at the same time.
<label>The awesome input</label>
<input [(ngModel)]="dynamicValue" placeholder="Watch the text update!"
type="text">
<label>The awesome output</label>
<span>{{dynamicValue}}</span>
Although, by default ngModel isn't imported. We have to add the FormsModule from @angular/forms into the imports array in the app-module.ts.