Display loading while using Observable with Async pipe in template
Solution 1
Maybe a little late but in case someone else is wondering how to manage this... What about using a template?
you could for example use something like:
<ion-card-content *ngIf='(course$ | async) as course; else loading'>
<p>{{course.description}}</p>
<br>
<h2>Learning Objectives</h2>
<ul>
<li *ngFor = "let objective of course.objectives">
{{objective.text}}</li>
</ul>
<h2>Takeaway</h2>
<ul>
<li *ngFor = "let takeaway of course.takeaways">
{{takeaway.text}}</li>
</ul>
</ion-card-content>
<ng-template #loading>
Loading stuff...
</ng-template>
so your ion-card-content will be hidden, showing the #template, until the async pipe is loaded.
Solution 2
You could do something like this:
<style>
pre {
color: orange;
// or whatever you want
}
</style>
<ion-card-content>
<p>{{(course | async)?.description}}</p>
<br>
<h2>Learning Objectives</h2>
<pre *ngIf="!(course | async)">loading objectives...</pre>
<ul>
<li *ngFor = "let objective of (course | async)?.objectives">{{objective.text}}</li>
</ul>
<h2>Takeaway</h2>
<pre *ngIf="!(course | async)">loading takeaways...</pre>
<ul>
<li *ngFor = "let takeaway of (course | async)?.takeaways">{{takeaway.text}}</li>
</ul>
</ion-card-content>
Solution 3
Lets say we have an observable meals$. We need to show loader when the observable is getting resolved(i.e fetching data). Below is the solution.
<div *ngIf="meal$ | async as meal; else loading;" >
//use the meal variable to show some data
</div>
<ng-template #loading>
//Show your loader here
</ng-template>
Comments
-
Hugh Hou almost 2 years
Situation: I am using FirebaseObjectObservable to populate my Ionic 2 (rc0) template. Template code:
<ion-card-content> <p>{{(course | async)?.description}}</p> <br> <h2>Learning Objectives</h2> <ul> <li *ngFor = "let objective of (course | async)?.objectives">{{objective.text}}</li> </ul> <h2>Takeaway</h2> <ul> <li *ngFor = "let takeaway of (course | async)?.takeaways">{{takeaway.text}}</li> </ul> </ion-card-content>
TS code:
this.course = this.af.database.object('/bbwLocations/courses/' + courseId);
this.course is a Firebase Object Observable. Everything works! But whenever I come into the template, there is a flash of empty no data. Then all the data jump out! Very not UX friendly. So I want to use some kind of pre-loading strategy. But since there is not TS logic here. Everything is controlled in template level with async pipe. How would I add loading in this situation?
-
Hugh Hou over 7 yearsThis works. But if I want exit animation, like fade out the loader when ngIf become false. I won't be able to do that. Also, is that possible to tap into the observable and use Ionic Loader component for this?
-
Sasxa over 7 yearsIf you want to use ngIf I believe
Animations
are the way to go. You could use ngClass instead of ngIf and do animations/transitions with CSS.transition: 1s opacity 0.5s linear
, and such... -
Hugh Hou over 7 yearsCould you update your solution and give me an example how to easily use animations to do a fadeout of the pre element? Thank you!
-
André Roggeri Campos over 6 yearsBut this make lots of unecessary requests... :(
-
Birchlabs over 5 yearsIf it's duplicating your request: you are giving observers access to a cold observable. You should use
share()
or similar to setupcourse
as a hot observable.this.course = this.httpClient.get('whatever').pipe(shareReplay(1))
. this will store the most recent result, so that if you have multiple subscribers: they can observe a replay of the result instead of initiating a new HTTP request.