ERROR: Cannot assign value "$event" to template variable "element". Template variables are read only

Can someone please help me what is wrong with this code?

 <div *ngFor="let element of list; let index=index">
    <mat-form-field>
      <input matInput type="string" [(ngModel)]="element" name="element" #field="ngModel">
    </mat-form-field>
</div>

I am getting an error
ERROR: Cannot assign the value "$event" to template variable "element". Template variables are read only

I tried below solution

<div *ngFor="let element of list; let index=index">
  <mat-form-field>
    <input matInput type="string" [(ngModel)]="list[index]" name="element" #field="ngModel">
  </mat-form-field>
</div>

This solution works but when I try to edit the input field it takes only one character at a time, for every character I need to click inside the input box and then type

>Solution :

This may not work with the latest version. You need to understand template variables. Angular-understanding template variables

Change the code like below

<div *ngFor="let element of list; let index=index">
<mat-form-field>
  <input matInput type="string" [ngModel]="element" (change)="updateElement($event.target.value,index)" name="element" #field="ngModel">
</mat-form-field>
</div>

In .ts file, write update function as

updateElement(value:string,index:number) {
  this.list[index] = value;
}