Refresh only one item for ngFor in Angular 7

Question

I have an array that contain multiple objects as shown below.

this.list = [
 {
  "image": "imageurl1",
  "name": "itemname1"
 },
 {
  "image": "imageurl2",
  "name": "itemname2"
 },
 {
  "image": "imageurl",
  "name": "itemname3"
 }
]

Above list is just an example array, not real one. Below is app-folder is another component where I have applied folderList array to iterate through whole list.

<app-folder *ngFor="let folder of documentsData.folderList" [documentsData]="documentsData" [folderData] = "folder"
                [folderList]="documentsData.folderList" (processAction) = "refreshFolders($event)"></app-folder>

Showing the data in angular material card. Here I am trying to change the name of any item by calling an api (this is to update db). Once I make such changes and update list variable, whole list blink on front end.

Functionality is working fine, but I don't want to whole list to blink, rather I want only particular item to reflect change or blink.

How to update only once item that has been changed and update *ngFor to reflect that. Is there any way to handle that?

check this: https://stackoverflow.com/questions/42108217/how-to-use-trackby-with-ngfor and this: https://medium.com/better-programming/improving-angular-ngfor-performance-through-trackby-ae4cf943b878 — Antonis, Jul 15 '19 at 08:05

score 1 · Answer 1 · answered Jul 15 '19 at 08:12

You will have to append or modify only that given entry in list. Otherwise, if you do something like

this.list = myNevListFromService

Anguar detects that collection has changed (not elelents of collection) thus recreates whole collections representation.

If you would only update single entry, it would not happen. Besides that, there can be couple of more reasons that can cause this, but you must share code to detect that

Refresh only one item for ngFor in Angular 7

1 Answers1