Angular 10 Tutorial - Two Way Binding

In this tutorial, we will learn about two-way binding in Angular 10. Two-way data binding in Angular helps users to exchange data from the component to view and from view to the component. It establishes communication bi-directionally.

Two-way data binding can be achieved using the ngModel directive in Angular. So, let's see how we can do two-way binding in Angular 10.

Implementing Two Way Binding

Switch to the project and open the app.component.html file. Here, let's create a property and input text field:

msg= '';
<input type="text" [(ngModel)] = 'msg' /> 

Now, for ngModel, we have to import FormsModule. So, go to the app.module.ts file and here, first of all, import the FormModule:

import { FormsModule } from "@angular/forms";

Now, add this FormsModule to the Imports array:

@NgModule({
imports: BrowserModule, FormsModule],
declarations: AppComponent],
bootstrap: AppComponent]
});

Now, go to the app.component.html file and here, just print the msg:

<h1>{{msg}}</h1>

Now, let's check it. So, switch to the browser and inside the text input field, add any text. And here you can see the text. So, in this way, you can do two-way binding in Angular 10.