*ngIf ... else... not working


Anyone any idea what is wrong with the below and why don’t I see the <ng-template> while the data is loading (once loaded everything works fine)?

<GridLayout *ngIf="user$ | async; let user; else loading">
  <!-- markup to show when done loading data -->
<ng-template #loading><Label text="Loading..."></Label></ng-template>

This example using a <Placeholder> component doesn’t work either for me. Also tried upgrading from Angular 4.2.0 to 5.2.0 which didn’t help either (which was to be expeced since *ngIf… else… is supported since Angular 4).

Any ideas?


Try this !
In case, do not work, post your code the.


Ah! Turns out that the *ngIf condition in my example always returns true. This works better:

<StackLayout *ngIf="(items$ | async)?.length>0; then contentTemplate else loadingTemplate"></StackLayout>
<ng-template #contentTemplate>
  <Label text="Content..."></Label>
<ng-template #loadingTemplate>
  <Label text="Loading..."></Label>


Hi Andre,

Sorry I had completely missed your post… Thanks for the demo and yes the playground is very useful :slight_smile: