How can I re-render the ngFor

Question

I just want to know how can I rerender the ngFor or refresh a component (hello.component.ts). Instead of text could be images or charts.

Here is an simple example: Stackblitz

Solution:

 public show = true;
 addData(data){
      this.data.push(data);
      this.reload();
    }
  reload() {
    this.show = false;
    setTimeout(() => this.show = true);
  }

Answer 1

Not sure if I understood your needs, but you may try simple ngIf and zero-timeout approach to re-render the component's template:

@Component({
  selector: 'hello',
  template: `<div *ngIf="show">
... your template
</div>`
})
export class HelloComponent  {

  public show = true;

  // ... your code

  reload() {
    this.show = false;
    setTimeout(() => this.show = true);
  }

}

Call the reload method when you need to "reload" your component. By setting show value to false and waiting for 1 event loop is done (setTimeout), you destroy inner template. By setting show value to true after this, you render inner template again.

---

UPD. Also you may force the Angular to re-render data-specific parts of your component's template by changing that data manually:

@Component({
  selector: 'hello',
  template: `...
<div *ngFor="let i of data">
  {{i}}...
</div>`
})
export class HelloComponent  {

  public data = [];

  // ... your code

  reloadData() {
    this.data = [...this.data];
  }

}

This would allow you to "reload" the data array only, so NgFor will handle it's inner template re-rendering automatically. By assigning new value to this.data (spread operator), you say to Angular that the parts of the template that are bound with data should be re-built.

Answer 2

The challenge is to get angular to see your change and redraw.

I recently worked through this with a coworker and found more than one way to do this. Our issue had to do with filtering

In the StackBlitz you share, you use more than one technique. I isolated just one portion, mutating the array that ngFor uses to draw the DOM elements.

ngFor draw update mutate

I'm also including the issue my coworker and I had. We wanted to have our list of items filtered using the value of an input box. Angular refused to redraw. Our solution was to add an ngModel to the input.

ngFor draw update ngmodel