title: PrimeNG Lazy load data with async pipe
body: <p>I have a very large amount of data (400.000 records) that I need to show in a PrimeNG data table. For this I need a lazy loading table, since you cannot load all data into the table in one time (this will make your browser crash). </p>
  
  <p>For creating the table I am using the following technologies:</p>
  
  <ul>
  <li><a href="https://angular.io/" rel="nofollow noreferrer">Angular</a> <code>7.2.4</code></li>
  <li><a href="https://material.angular.io/cdk/categories" rel="nofollow noreferrer">Angular/cdk</a> <code>7.3.1</code></li>
  <li><a href="https://github.com/johnpapa/angular-ngrx-data" rel="nofollow noreferrer">ngrx-data</a> <code>6.1.0-beta.3</code> (Ngrx http request wrapper)</li>
  <li><a href="https://www.primefaces.org/primeng/#/" rel="nofollow noreferrer">PrimeNG</a> <code>7.0.5</code> (UI Framework)</li>
  <li><a href="https://www.learnrxjs.io/" rel="nofollow noreferrer">Rxjs</a> <code>6.4.0</code></li>
  </ul>
  
  <hr>
  
  <p><strong>What do I want</strong></p>
  
  <p>I am trying to create a lazy loading table as shown in the <a href="http://primefaces.org/primeng/#/table/lazy" rel="nofollow noreferrer">PrimeNG docs</a>, where the data is loaded from the server and shown in table. When the user navigates to the next tab the next x amount of data is loaded and shown. </p>
  
  <p>The only difference is that I fetch all the data from the server before giving it to the table component. This way I will only have to pick certain data from the datasource and show it to the user. </p>
  
  <hr>
  
  <p><strong>The problem</strong></p>
  
  <p>While trying to implement it I ran into the problem that the <code>(onLazyLoad)</code> function is only called once, in the <code>onInit()</code> phase, before the data is loaded from the server. </p>
  
  <p>I can undo this by adding <code>[lazyLoadOnInit]="false"</code>, but this results in the lazy load function not being called at all. I was hoping I could trigger the load function by changing the <code>[totalRecords]</code> property when the data is loaded, but this also doesn't trigger the function. </p>
  
  <p>I cannot find any other function in the <a href="https://github.com/primefaces/primeng/blob/master/src/app/components/table/table.ts" rel="nofollow noreferrer">PrimeNG p-table code</a> that I could use for triggering the <code>(onLazyLoad)</code>, or am I missing something?</p>
  
  <hr>
  
  <p><strong>Code</strong></p>
  
  <pre><code>public ngOnInit(): void {
    this.cars$ = this.carService.entities$; // = []
    this.carService.getAll(); // = [Car, Car, Car, Car] OR []
  }
  </code></pre>
  
  <p><code>this.carService.entities$</code> has a default value of <code>[]</code> and is populated with the result of the <code>getAll()</code> function (this can also be <code>[]</code> if there are no results)</p>
  
  <hr>
  
  <p>I have reproduced my problem in <a href="https://stackblitz.com/edit/angular-z52que" rel="nofollow noreferrer">a StackBlitz</a>. Here you can see that the data is never shown, because the <code>(onLazyLoad)</code> is only called the first time, when the data is empty. </p>
  
  <p>Note that I am using the <a href="https://angular.io/api/common/AsyncPipe" rel="nofollow noreferrer">Angular Async pipe</a> for passing the data into my component. This means I need to check the changes in a <code>ngOnChanges()</code> function.</p>