Angular - matInput two-way data binding does not work

Question

In my template...

<input matInput placeholder="Amount" [(value)]="amount">

In my component...

class ExampleComponent implements OnInit {
    amount: number = 0;
    ...
}

This doesn't bind.

I've also tried this in my template...

<input matInput placeholder="Amount" [(ngModel)]="amount">

Which causes the following error on compile...

Can't bind to 'ngModel' since it isn't a known property of 'input'.

Jasdeep Singh Jasdeep Singh · Accepted Answer · 2020-03-17T11:36:36

<input matInput placeholder="Amount" [(ngModel)]="amount">

Above is the correct statement for two way data binding. You need to import FormsModule in app.module.ts

After importing, include FormsModule in imports array of NgModule decorator.