CODEWITHSUNDEEP
angular
Matthias Herrmann
Matthias Herrmann

Reputation: 2790

Angular 4 Only Add New Elements To View Without Rerendering Old Items Again

Angular 4:

I'm doing an api call by using an angular service. The result of a request is a list with entries. Here is the code for the template - (pis) is an iterable array provided by the http-request:

<tr *ngFor="let pi of pis;">
    <td>{{pi.mac}}</td>
    <td>{{pi.uptime | secondsReadable}}</td>
</tr>

The api call is not only executed once. So when doing a Second Api Call all Elements are getting rerendered.

So I thought the tablerow can be identified by using the mac because it is unique and only entries with new mac-adresses need to be added.

After some googling I think track by is the feature I need to implement. But I don't know how I can implement it. I'm new to angular and so I'm a little bit confused by the different implementations of track by in older angular versions and can't find a suitable example for Angular 4.0.

Method in components which is handling the api call:

getPis() {
  this.pisService.getPis()
      .subscribe(
      pis => { this.pis = pis;},
      error => this.errorMessage = <any>error);}

Upvotes: 0

Views: 56

Answers (1)

Matthias Herrmann
Matthias Herrmann

Reputation: 2790

I finally figured out how to get it working.

the *ngFor is now looking like this: *ngFor="let pi of pis; trackBy: trackByMac;".

And the trackByMac is a simple function in the component class which reads like this:

trackByMac(index, item){
return item.mac;}

Upvotes: 1

Related Questions