Angular 6 - dużo danych. Generowanie tabeli z pomocą *ngFor

  isLoading$: BehaviorSubject<boolean> = new BehaviorSubject(false);
  isZerowe: boolean = false;

  ngOnInit() {
    this.isLoading$.next(true);
    this.globals.updateGlobalKontrahent(null);
    this.api.GetTowary(this.isZerowe).subscribe((result: any[]) => {
      this.towary = result;
    }, (error) => { console.log(error) }, () => {
      this.isLoading$.next(false);
    });
  }

<div *ngIf="isLoading$ | async" class="progress active">
  <div class="progress-bar indeterminate progress-bar-danger" role="progressbar" style="width:50%; height:4px;"></div>
</div>

   <div *ngIf="!(isLoading$ | async)" class="table-responsive row">
     <table class="table table-bordered table-head-purple table-hover table-striped" width="100%" id="towaryTable">
       <thead class="thead-default thead-lg">
         <tr>
           <th>#</th>
           <th>Kod</th>
           <th>Nazwa</th>
           <th>Typ</th>
           <th>EAN</th>
           <th>Numer katalogowy</th>
           <th>JM</th>
           <th>Ilość</th>
           <th>Cena</th>
           <th>CenaPLN</th>
         </tr>
       </thead>
       <tbody>
         <tr (dblclick)="route.navigate(['/towar/edit/', t.ID])" *ngFor="let t of towary; let i = index">
           <td>{{i + 1}}</td>
           <td>{{ t.Kod }}</td>
           <td>{{ t.Nazwa }}</td>
           <td>{{ t.Typ }}</td>
           <td>{{ t.EAN }}</td>
           <td>{{ t.NumerKatalogowy }}</td>
           <td>{{ t.JM }}</td>
           <td>{{ t.Ilosc }}</td>
           <td>{{ t.Wartosc | currency:' ':'code' }}</td>
           <td>{{ t.WartoscPLN | currency:' ':'code' }}</td>
         </tr>
       </tbody>
     </table>
   </div>

      let temp2:any[] = [];
      for (let i = 1; i <= loopCounter; i++) {
        let start = (i * 1000) - 1000 ;
        let end = i * 1000;
        let temp1 = tempKontrahenci.slice(start, end);
        temp2.push(temp1);
      }