Upload gif before data reaches page

Asked

Viewed 52 times

0

I am bringing the data from the server through an NGFOR with pipe async but I would like to show a gif of loading until the data arrives, it takes about 3 seconds for the data to appear on the screen and I would like to show a gif of loading...

    <table cellpadding="5">
    <tbody>
    <tr *ngFor="let contato of contatos | async">
      <td><img src="../../assets/{{contato.key}}.png" alt="facebook"></td>
      <td class="redes">{{contato.data}}</td>
    </tr>      
  </tbody>
  </table>
angular typescript visual-studio-code

  • But it’s not just putting one if in both td?!

  • I tried to do it and I couldn’t, it has to help me with the code ?

  • Put it there the way you tried

  • I tried to make a Ngif in the variable of the is if it was different from null would show the TD but it didn’t work

  • Edit the answer and put in the code of the question there friend to see how you did!

  • The way I did didn’t work out, buddy... what am I posting ?

  • Well, because it’s easier to see what you’ve tried, and try to correct than to speculate as you did.

  • https://ultimatecourses.com/blog/angular-ngif-async-pipe

Show 3 more comments

1 answer

0

That should solve your case:

 <table cellpadding="5">
    <tbody>
    <tr *ngIf="!contatos || (contatos && contatos.length == 0)">
       <!- gif aqui -->
    </tr>
    <tr *ngFor="let contato of contatos | async">
      <td><img src="../../assets/{{contato.key}}.png" alt="facebook"></td>
      <td class="redes">{{contato.data}}</td>
    </tr>      
  </tbody>
  </table>

  • it worked not, but vlw ai the attempt friend....

Browser other questions tagged angular typescript visual-studio-code

You are not signed in. Login or sign up in order to post.