Angular-gridster2: Data loaded with HTTP appears only after a click

[petarGitNik]

I have to fetch data over HTTP and load it into a cell. However, when my service finishes loading the data, data in cell is displayed only if I click/drag the cell, or click/drag/resize/delete any other cell.

Here is a demonstration on stackblitz (the cell which should display dynamically fetched data is yellow).

In the demo my service is injected in the constructor of app.component.ts, and data is stored in the variable users. Then, in the template, the content is shown only if users variable has some value i.e.

          <div class="dynamic-users" *ngIf="users">
            Dynamic users are: <span *ngFor="let user of users">{{user.name}} </span>
          </div>

All relevant code is commented in app.component.ts and app.component.html. My question is, is this expected behavior of gridster, and/or should I "refresh" the grid somehow after loading data from an external API?

[tiberiuzuld]

Hi @petarGitNik ,
Your component has:

 changeDetection: ChangeDetectionStrategy.OnPush

Add:

constructor(private ps: ProviderService, private ref: ChangeDetectorRef) { }
    this.ps.getHeroes().subscribe((users) => { this.users = users; this.ref.markForCheck() });

More info about how ChangeDetection works here: https://angular.io/api/core/ChangeDetectorRef
https://blog.angularindepth.com/everything-you-need-to-know-about-change-detection-in-angular-8006c51d206f

[petarGitNik]

Thank you @tiberiuzuld ! I thought it was a bug. Thank you very much for help and gridster :)

[darrenst]

Thanks that did it.

If you are not following the Angular Heroes Tut, the bits you needs are:
ChangeDetectorRef } from '@angular/core' in import
private ref: ChangeDetectorRef in constructor

then turn your subscribe lambda into an object and call:
this.ref.markForCheck();

thanks tiberiuzuld