Angular 2 set boolean at end of iteration using *ngFor

Question

I am loading some data via rest-endport to safe it in an array. In an *ngFor directive i am currently iterating through all that data. So everthing is working.

Is there any possible way in Angular to e.g. set a boolean whenever the iteration of the array is finished (so that i can fire another function on complete)?

-- Edit--

On the ngOnInit lifecycle method i am retreiving the data:

ngOnInit() {
   this.restService.getSomeBooks(5000).subscribe(buch => {
     this.buecher = buch;
     this.fetched = true;
   })
}

After that - in HTML - i am iterating over that data:

    <table>
      <thead>some table-heads</thead>
      <tbody>
      <tr style="text-align: center"  *ngFor="let buchforTable of buecher">
        <td>{{buchforTable.author}}</td>
        <td>{{buchforTable.erscheinungsdatum}}</td>
        <td>{{buchforTable.isbn.toString()}}</td>
        <td>{{buchforTable.verlag}}</td>
        <td>{{buchforTable.uuid}}</td>
      </tr>
      </tbody>
    </table>

The *ngFor-iteration should set a boolean variable whenever it is done.

What is the actual problem you're trying to solve with this; could you provide some context? — jonrsharpe, May 23 '17 at 19:40
The context is that i want to measure the time between the start of the iteration and the end of it. So when i am iterating over an array of 5000 elements i want to save the current time in a variable at the firt array-index and then again safe the current time at the very last array index. So that with the difference of these time-values i can get the actual time needed for the iteration process. I hope thats understandable. — Fzum, May 23 '17 at 19:45
Show the code, I am sure that there's a good way to solve it. — s.alem, May 23 '17 at 19:47
Maybe you can try trackBy (https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html) function where you will compare current index with length. If index equals length then you can get time of very last index. — Alex Po, May 23 '17 at 19:52
Possible duplicate of [Angular 2: Callback when ngFor has finished](https://stackoverflow.com/questions/35819264/angular-2-callback-when-ngfor-has-finished) — eko, May 23 '17 at 20:02

score 0 · Accepted Answer · answered May 23 '17 at 21:01

As Alex Po already mentioned, trackBy is working. As you can see in the following snippet, with trackBy it is possible to handle events based on the current index of the iteration.

<tbody>
  <tr style="text-align: center" *ngFor="let buchforTable of buecher; trackBy: trackByFn">
    <td>{{buchforTable.author}}</td>
    <td>{{buchforTable.erscheinungsdatum}}</td>
    <td>{{buchforTable.isbn.toString()}}</td>
    <td>{{buchforTable.verlag}}</td>
    <td>{{buchforTable.uuid}}</td>
  </tr>
</tbody>

To measure the time of the rendering process of all array-objects the trackBy-function would look like this (array contains 5000 objects here -> index 0 to 4999):

 trackByFn(index){
    if(index == 0)
      this.renderStart = performance.now();
    if(index == 4999) {
      var renderStopp = performance.now();
      var timeToRender = renderStopp - this.renderStart;
    }
  }

Angular 2 set boolean at end of iteration using *ngFor

1 Answers1