Is there a way to delay the ngx-bootstrap accordion opening?

<accordion [closeOthers]=true>
<accordion-group *ngFor="let activity of activities" [heading]="activity.Name" (click)="openPanel(activity)" (isOpenChange)="openStatusChange($event)">
<ul *ngFor="let chemical of chemicals">
<li>{{chemical.BrandName}}</li>
</ul>


0">No chemicals associated with this activity type.


</accordion-group>
</accordion>


When the accordian header is clicked, it opens and runs and fires 'openPanel()' which is an http.get, which then populates the panel. If the array returns empty, the *ngIf will display the "no associated stuff" message.

The problem is there is a very slight lag between the time the accordion opens and the array is filled, so the chemicals array is always empty when the accordion opens. This makes it so the "no associated stuff" message appears for about half a second, then the list populates. So I am wondering if there is a way to either delay the opening until the array is populated, or suggestions welcome.

1 Answer
1

You could use a boolean flag or function for the ngIf. Set the flag when the http promise returns as successful, that way the ngIf only triggers after the http call promise is resolved.

something like:

http.get('url').subscribe(response => {
show = true;
});


Good idea but it still does it. I'm wondering if it's because it is a repeat, so when a new panel is opened there is some kind of bleed over fromt eh previous panel content?
– BattlFrog
Jun 29 at 22:05

Hmmm, that could be it.
– Nickknack
Jun 29 at 22:07

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.