Search code examples
angularangular6

Mat Input two way binding to value property not working

I have created a Mat Input control and done a 2 way binding of it's value property to a property on my controller but when I type in the input the bound property is not updated.

Stack blitz link: https://stackblitz.com/edit/angular-7ojsjo

<div class="example-container">
  <mat-form-field>
    <input matInput placeholder="Input" [(value)]="currentValue">
  </mat-form-field>

  <h1>{{currentValue}}</h1>
</div>

Why is the bound property not updating?

Solution

  • Use [(ngModel)] instead of [(value)] (see this stackblitz for a demo).

    <input matInput placeholder="Input" [(ngModel)]="currentValue">

    This article explains how the equivalent behavior can be obtained with a combination of [value] and (input).