Input Loses Focus When Editing Value. Using Ngfor And Ngmodel. Angular5

I have a simple list that binds two-way to a parameter hero in hero.component.ts. Though when I start typing in the input field it loses focus and I have to click it again. What am

Solution 1:

Using trackBy function of angular fixes the issue.

live example showing it

Solution 2:

Did you try using trackBy:trackByFn in your ngFor, by using it prevent angular to recreate your DOM and it will keep track of changes

see this tutorial here

Solution 3:

In html:

<div *ngFor="let a of a[]; let index = index; trackBy: trackByFn">

In TS:

trackByFn(index, item) {   return index; }