Angular array update without complete refresh

Question

Problem: There is an array e.g.

[{id: 1, name: "stefan"}, {id: 2, name: "alex"}, ...]

This list is bound to a *ngFor which can also show details.

Now there comes an update from the server with a new list

[{id: 1, name: "stefanie"}, {id: 2, name: "alexandra"}, ...]

So the ids are identical, but names are the same.

Requirement: Now if I want to assign the new array to the existing array, *ngFor gets completly refresh, hidding my details window. However I just want to

update the item if one with the same id already exists
add new items
delete items which don't exist anymore

I found answers, how you can make this by filtering and updating, however it looks like a pretty common problem to me. So I guess there is alreay a build in function or a clever library which solves this... right?

Frits · Accepted Answer · 2018-06-27 06:07:01Z

1

You might be looking for the TrackBy feature of angular. With TrackBy, Angular is able to detect which items are deleted or added to an array, using a unique identifier. So, only the items added or removed have to be updated in the DOM.

Here is an extended explanation of TrackBy.

edited Jun 27, 2018 at 6:07

answered Jun 20, 2018 at 9:43

Frits

3141 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Milan Hlinák · Accepted Answer · 2018-06-20 09:44:59Z

1

You are looking for *ngFor with trackBy see this example.

answered Jun 20, 2018 at 9:44

Milan Hlinák

4,4801 gold badge34 silver badges41 bronze badges

Collectives™ on Stack Overflow

Angular array update without complete refresh

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related