Угловой 2 предзагрузчик

Question

Я не знаю, как поставить preloader(простое изображение) перед *ngFor. Если данные выбираются с сервера, появляется мой список, но пока данные не загружены, отображается картинка.

---

<tr ngFor='#product of products' >                        
    <td >                         
         {{product.id+ " " + product.title}}
    </td>            
</tr>

Answer 1

Вы должны использовать ngIf. Вот шаблон, который вы можете использовать

<table *ngIf="products.length != 0">
    <thead>
      <tr>
          <th>Id</th>
          <th>Title</th>
      </tr>
    </thead>
    <tbody>

    <tr *ngFor="#product of products">
        <td>{{product.id}}</td>
        <td>{{product.title}}</td>
    </tr>

    </tbody>
</table>

<loading-image *ngIf="products.length == 0"></loading-image>

где loading-image ваш компонент, который вы определяете сами

@Component({
    selector: 'loading-image',
    directives: [],
    template: `
    <img src="{{loadImg}}">
  `
})
export class LoadingImage {
    loadImg = 'assets/img/your-loading-image.gif';
}