It's a common pattern in Angular apps to display some data coming from Observable with ngIf directive and provide else template to show placeholder while data is loading.
<data-view *ngIf="data$ | async as data; else progress" [items]="data">
</data-view>
<ng-template #progress>
<mat-icon></mat-icon>
<mat-progress></mat-progress>
</ng-template>
However It requires it multiple repetition of else template, async pipe, and as clause. Is it possible to avoid this boilerplate all together with custom directive like this:
<data-view *ngWait="data$" items="data">
</data-view>
I understand how one can combine ngIf with async pipe, but I can't figure out how to embed else template into custom directive.
else
template in place of the original component. However, have you explored creating a custom wrapper component. That way you can consume Observable via inputs and control the display ofelse
template. Also usingng-content
you can project the child component and pass the right data. This way the user of your component only has to worry about their implementation and not handling theelse
scenario. – ashish.gd