Handling Input with Two way binding

When we work on input text boxes, we want to display component class property in a template and update that property when user makes a change. This process requires two way binding. This can be done using 'ngModel'. Eg:
<input [(ngModel)]='listFilter'>

Note: when we use 'ngModel' we have to import 'FormsModule' from '@angular/forms' in 'app.module.ts'

Code Structure

'listFilter: string = 'cart'' adds default value in input field
'[(ngModel)]='listFilter'' shows default value from component class
'{{listFilter}}' shows updated value from input field

Now, we have to import 'FormModule' in 'app.module.This'

Share this

Related Posts