Angular 8 Tutorial Two Way Data Binding #13

Two-way binding gives your app a way to share data between a component class and its template.

Basics of two-way binding

Two-way binding does two things
1. Sets a specific element property.
2. Listens for an element change event.
Angular offers a special two-way data binding syntax for this purpose, [()]. The [()] syntax combines the brackets of property binding, [], with the parentheses of event binding, ().

[( )] = BANANA IN A BOX
Visualize a banana in a box to remember that the parentheses go inside the brackets.
[(ngModel)]: Two-way binding
The NgModel directive allows you to display a data property and update that property when the user makes changes.

Import FormsModule to use ngModel
Before using the ngModel directive in a two-way data binding, you must import the FormsModule and add it to the NgModule's imports list

Angular 8 2020 | Introduction to Angular
Angular 8 2020 | Angular Project Setup #2
Angular 8 2020 | Workspace vs File Structure of Angular #3
Angular 8 2020 | Single Page Application vs Multi page Application #4
Angular 8 2020 | Complete architecture Overview #5
Angular 8 2020 | What is Component in Angular Application #6
Angular 8 2020 | Interpolation #7
Angular 8 2020 | Property binding #8
Angular 8 - tutorial | Class Binding #9
Angular 8 - tutorial | Style binding #10
Angular 8 - tutorial | event binding #11
Angular 8 - Tutorial | The magic of template reference variables #12