I have a message component that makes an async call to retrieve the message. In my template, I use the async pipe to populate the view. So on the component, I have a message$ that gets the message from a service like so:
message$ = this.messageService.getMessage();
and in my message-component.html I have
<div *ngIf="message$ | async as message">
{{message.value}}
</div>
-- other code
But the issue here is, I don't want my view to be empty when the message is being retrieved. I can use the else clause inside the *ngIf statement and define a template that replaces the div from above to show that something is loading. You can use a loading spinner or something similar, but for simplicity, I will just use a div with a text. So my final view will be something like
message.component.html
<div *ngIf="message$ | async as message; else isBusy">
{{message.value}}
</div>
<ng-template #isBusy>Loading...</ng-template>
And that's it; hope that helps.
PS: The method stated above may not always be the best way to show a loading spinner for an async call, if there is any better way of doing it please let me know. TIA
Top comments (0)