What is ngModel and two way data binding in Angular 2 and greater versions?
In our previous tutorials we have seen one way data binding, in which data moves in unidirectional path, either from view to component(Event Binding) or from component to view(Property Binding). In Angular version 1 or AngularJS, Changes in the application state have been automatically reflected into the view and vise-versa. But Angular 2 or > 2.x doesn’t come with such a (built-in) two-way data binding anymore.
Angular 2 provides us a directive called ngModel to achieve two-way data binding. Means changes in view update the value in component and changes in component update the value in view, both are synchronized.
To understand what that means, let’s have a look at this code snippet below:
|
1 2 3 |
<input [(ngModel)]="username"> <p>Hello {{username}}!</p> |
Look the [(ngModel)] notation, it’s a combination of Property Binding [] and Event Binding() functionality together, So that data will update from both end. The ngModel comes as a built-in directive as part of the FormsModule to implement two-way data binding.
