Problem updating component data in Angular

I need help to solve the next problem:

I have a component A, that subscribes to an API service and gets new data every 5 seconds:

  ngOnInit(): void {
    const obs = this.dataService.getData();
    this.data$ = obs.pipe(repeatWhen(() => interval(5000)));
  }

in the template I have the next code:

  <div *ngFor="let data of data$ | async">
    <app-view-data [data]="data"></app-view-data>
  </div>

In the component ViewDataComponent (app-view-data) I make the preview of the input data with some additional options, for example, I add an input field, where user can type anything next to the provided data.

example template:

Id: {{ data.id }}<br/>
Name: {{ data.name }}<br/>
Count: {{ data.count }}<br/>
<input placeholder="enter your comment" />

The problem is that, when the Observable from the dataService emits a new value, the ViewDataComponent components are rebuild, and the input’s value is lost.

The emitted data in most cases contains the same set of data, which can be slightly changed, for example the count can be updated for the same item.

If the item get’s removed – it’s ok to lost that input, but if the item did not change, or only count was updated – then the input must stay. The ViewDataComponent component should not rebuild.

I know there is an optimization feature in angular – trackBy, but this doesn’t fit me, because the data can be changed (for example the count can be updated), but the item must stay the same place. – in this situation the ViewDataComponent should only update the count without any other visual changes.

Source: Angular Questions