ngif else Angular4的div重叠

Question

I'm subscribed to an stream to get some data from a third party API and while that's happening I display a div with a spinning wheel kind of stuff. Once I have the data then that data is replacing that div. I have that with an ngif else :

<div *ngIf="my-data;else loading" class="my-data-container">
  ...
</div>
<ng-template #loading>
   <div class="loading-container">
      shows the loading spinning wheel    
   </div>
</ng-template>

the problem I have is that for a really short period of time both divs appear on the screen and they make an strange effect like a small blip. I would like them to overlap each other otherwise they appear one under the other. Can I achieve that via code or do I need to investigate a css trick for it?

Answer 1

Use container as ngif template instead of div it self

<ng-container *ngIf="my-data;else loading">
  <div class="my-data-container">
  ...
  </div>
</ng-container>
<ng-template #loading>
   <div class="loading-container">
      shows the loading spinning wheel    
   </div>
</ng-template>

Answer 2

Make sure you declare my-data value as null at the start and change ngIf syntax to use then :

<div *ngIf="my-data; then #content; else loading" class="my-data-container">
</div>
<ng-template #content>
    show this content after loading
</ng-template
<ng-template #loading>
   <div class="loading-container">
      shows the loading spinning wheel    
   </div>
</ng-template>