Two way binding in Angular 9 [Common Angular Interview Question]

Опубликовано: 16 Сентябрь 2024
на канале: Code Decode

Two way binding in Angular 8 | Angular | Angular Tutorial for Beginners | Angular Two Way Binding | two way binding in angular 6

Two-way data binding in Angular is a combination of both Property Binding and Event Binding.
If you view the page in the browser, you will get the following error
Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'

This is because ngModel directive is, in an Angular system module called FormsModule. For us to be able to use ngModel directive in our root module - AppModule, we will have to import FormsModule first.

The square brackets on the outside are for property binding
The parentheses on the inside are for event binding
To easily remember this syntax, compare it to a banana in a box [()].

Learn how to use the `ngModel` directive to achieve two way data binding between the view and the component class. Learn how to bind a text input element to a member variable of your component class.

Two-way data binding:

2 way data binding means changes made in component data should sync to the view so any changes made in the view are immediately updated in the respective component data
Two way binding is used mainly in data entry forms whenever user makes any changes in the data we would like to update our model in the component with new data and if model changes, we would like to update view as well

Angular uses combination of property binding and event binding by using ngModel directive

ngModel directive is not apart of angular core library . It is defined in the FormsModule library. You need to import FormsModule into our main module that is app.module.ts