$event - Is exposed by angular event binding, and contains the event data. To retrieve the value from the input element use - $event.target.value.

name = $event.target.value - This expression updates the value in the name property in the component class

You entered : {{name}} - This interpolation expression will then display the value on the web page.

So in short two-way data binding in Angular is a combination of both Property Binding and Event Binding. To save a few keystrokes and simplify two-way data binding angular has provided ngModel directive. So with ngModel directive we can rewrite the following line of codeName : <input[value]='name'(input)='name = $event.target.value'>

Like this : Name : <input [(ngModel)]='name'>

At this point if you view the page in the browser, you will get the following errorTemplate 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.

Here are the steps to import FormsModule into our AppModule1. Open app.module.ts file2. Include the following import statement in itimport { FormsModule } from '@angular/forms';3. Also, include FormsModule in the 'imports' array of @NgModule imports: [BrowserModule, FormsModule]

With these changes, reload the web page and it will work as expected.

So here is the syntax for using two-way data binding in Angular<input [(ngModel)]='name'>