CODEWITHSUNDEEP
cssangulartypescript
Carlos Torrecillas
Carlos Torrecillas

Reputation: 5736

overlap divs for ngif else Angular4

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?

Upvotes: 1

Views: 630

Answers (2)

Vega
Vega

Reputation: 28738

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>

Upvotes: 1

Long Zhao
Long Zhao

Reputation: 153

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>

Upvotes: 1

Related Questions