run a function once ngFor has completed rendering the data

Question

run a function once ngFor has completed rendering the data

I'm attempting to run a function every time my ngFor finishes loading data from the API.

However, the callback only works on the initial load of the ngFor.

How can I make sure that the callback is executed whenever my ngFor data changes?

I found a solution here:

Here's what I have so far...

HTML

<button class="btn" (click)="changeDate()"></button>

<div *ngFor="item of items; let last = last">
    <div>{{item}}{{last ? ngForAfterInit() : ''}}</div>
</div>

TS

this.ngForIsFinished = true;

ngForAfterInit() {
    if (this.ngForIsFinished) {
        this.ngForIsFinished = false;
    }
}

changeDate() {
    // trigger ngFor content change here
}

The answer suggests setting ngForIsFinished back to true, but I'm struggling to figure out where in my code to do that.

javascript angular ngfor

Answer 1

Answer №1

Consider utilizing the ChangeDetectionStrategy.OnPush and the last variable in your ngFor loop. This is recommended because with ChangeDetectionStrategy.Default, methods are always checked, leading to multiple calls of fooMethod(...):

<div *ngFor = "let title of iterated; let i=index; let last=last">
  {{last ? fooMethod(last) : '' }}  
</div>

In your component file:

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent  {
  name = 'Angular 4';

  iteratedData = [
      {"title":"test1","description":"foo","name":"name1"}, 
      {"title":"test2","description":"foo","name":"name2"}, 
      {"title":"test3","description":"foo","name":"name3"}, 
      {"title":"test4","description":"foo","name":"name4"}
  ];

  fooMethod(v) {
    if (v)
      console.log(`This is from the method ${v}`);
  }
}

UPDATE:

After loading data, it's advisable to call the slice method as Angular 2 change detection strategy doesn't monitor array or object contents. Therefore, creating a copy of the array after mutation is suggested:

this.iteratedData.push(newItem);
this.iteratedData = this.iteratedData.slice();

Alternatively:

constructor(private changeDetectorRef: ChangeDetectorRef)

You can then invoke the markForCheck method to trigger a changeDetection:

this.iteratedData.push(newItem);
this.changeDetectorRef.markForCheck();

Answer 2

Consider utilizing the ChangeDetectionStrategy.OnPush and the last variable in your ngFor loop. This is recommended because with ChangeDetectionStrategy.Default, methods are always checked, leading to multiple calls of fooMethod(...):

<div *ngFor = "let title of iterated; let i=index; let last=last">
  {{last ? fooMethod(last) : '' }}  
</div>

In your component file:

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent  {
  name = 'Angular 4';

  iteratedData = [
      {"title":"test1","description":"foo","name":"name1"}, 
      {"title":"test2","description":"foo","name":"name2"}, 
      {"title":"test3","description":"foo","name":"name3"}, 
      {"title":"test4","description":"foo","name":"name4"}
  ];

  fooMethod(v) {
    if (v)
      console.log(`This is from the method ${v}`);
  }
}

UPDATE:

After loading data, it's advisable to call the slice method as Angular 2 change detection strategy doesn't monitor array or object contents. Therefore, creating a copy of the array after mutation is suggested:

this.iteratedData.push(newItem);
this.iteratedData = this.iteratedData.slice();

Alternatively:

constructor(private changeDetectorRef: ChangeDetectorRef)

You can then invoke the markForCheck method to trigger a changeDetection:

this.iteratedData.push(newItem);
this.changeDetectorRef.markForCheck();

Answer 3

Answer №2

Check out this demonstration:

Component:

    import { Component } from '@angular/core';

        @Component({
          selector: 'my-app',
          templateUrl: './app.component.html',
          styleUrls: [ './app.component.css' ]
        })
        export class AppComponent  {
          name = 'Angular 5';
          data:any = [];

          ngAfterViewInit(){
            this.updateData();

          }

          updateListAfterForLoop(item) {
            alert('FOR LOOP COMPLETED : '+ item);
           }


           UpdateData(){
              let i = 0;
              setInterval(()=>{
                this.data=[];
                for(var j=0; j<10; j++){
                 this.data.push("TEST DATA "+ j+" SET AT :  "+i);
               };
               i+=1;
            },7000);
          }
       }

html:

<div *ngFor="let item of data; let last=last;">
{{item}} {{last? updateListAfterForLoop(item) :''}}
</div>

The SetInterval acts as an API to populate the data. This implementation has been successful for me.

https://stackblitz.com/edit/pokemon-app-4n2shk

Answer 4

Check out this demonstration:

Component:

    import { Component } from '@angular/core';

        @Component({
          selector: 'my-app',
          templateUrl: './app.component.html',
          styleUrls: [ './app.component.css' ]
        })
        export class AppComponent  {
          name = 'Angular 5';
          data:any = [];

          ngAfterViewInit(){
            this.updateData();

          }

          updateListAfterForLoop(item) {
            alert('FOR LOOP COMPLETED : '+ item);
           }


           UpdateData(){
              let i = 0;
              setInterval(()=>{
                this.data=[];
                for(var j=0; j<10; j++){
                 this.data.push("TEST DATA "+ j+" SET AT :  "+i);
               };
               i+=1;
            },7000);
          }
       }

html:

<div *ngFor="let item of data; let last=last;">
{{item}} {{last? updateListAfterForLoop(item) :''}}
</div>

The SetInterval acts as an API to populate the data. This implementation has been successful for me.

https://stackblitz.com/edit/pokemon-app-4n2shk

run a function once ngFor has completed rendering the data

Answer №1

Answer №2

Similar questions

Retrieving dates from a database and populating them into a jQuery UI Picker using PHP

Organizing DIVs upon website initialization

How can I use Angular2 to ensure that a child component automatically updates when there is a change in the parent's property?

Guide on transferring information obtained from a service to an Angular datatable

To convert an image file into a string, use JSON.stringify before including it in an AJAX request

The Design and Layout of a MEAN Stack Application

Retrieve the attribute values of an element in Angular after utilizing a template

Strategies for dynamically altering Vue component props using JavaScript

When `focus` is bound to a jQuery event handler, the behavior of the select element becomes erratic on

Patiently waiting for the component variable to be assigned through subscription

What is the best way to eliminate an object from an array of objects that fulfills a specific condition?

What is the best way to align the 'Typography' component in the center?

Creating columns on the fly within a row

Looking for a way to assign the object value to ng-model within a select tag from an array of objects? Also, curious about how to easily implement filters on ng-options?

Component with a dynamic CSS file implementation

Navigating to a specific section upon clicking

Ways to authenticate custom kinds in JSON schema?

Helping individuals identify the HTML5 Geolocation notification

Accessing nested objects within a JavaScript array for an Express API

Can you share the outcomes of executing a Node.js program in real-time?