How do I refresh ngIf method call from code

Question

I'm my angular 5 component's HTML file I've attached an *ngIf to a td element:

<tr *ngFor="let ar of ars">
    <td *ngIf="showCompleteButton(ar)">

The issue I'm having is that the showCompleteButton accesses an element that might not yet have loaded from the network. When the network element that I need loads, how do I tell the page to rerun that check so that the button starts appearing?

I know how to .subscribe() from a network call to take action after the load completes, I just don't know how to make that *ngIf call re-evaluate at that point.

Answer 1

Would making member variable in the template that would be filled in in subscribe work for you? As in ts:

showCompleteButton = {};

yourApiCall.subscribe(ars => {
 this.ars = ars;
 ars.forEach(ar => {
   this.showCompleteButton[ar] = this.showCompleteButton(ar);
   //do not know what type ar is but you get the idea...
 });

and in HTML:

<td *ngIf="showCompleteButton[ar]">

Sidenote: It is not good for performance to call function from template, it will be called over and over on every cycle.