PrimeNG p-table lazy load does not update without extra 'click'

I am using p-table of primeNG in a project with lazy loading. But I have a problem with my table being loaded without an extra 'click'.

In my template I have:

<p-table 
      [value]="products"
      [totalRecords]="totalRecords"
      [tableStyle]="{ 'min-width': '50rem' }"
      [paginator]="true"
      [rows]="10"
      [showCurrentPageReport]="true"
      [rowsPerPageOptions]="[5,10,20]"
      [lazy]="true"
      (onLazyLoad)="loadProducts($event)" 
  >

And in my component I have:

  products: ProductDTO[] = [];
  totalRecords : number = 5

...

  loadProducts(event : TableLazyLoadEvent){
    console.log(event);
    this.projectsOverviewService.getProducts()
      .subscribe((response:PagedListDtoOfProductDTO)=> {
        this.products = response.items;
        this.totalRecords = response.totalRecords;
        console.log("loaded products");
      });
    
  }

I have verified that the products and totalRecords are being set. But my table is not updated. Only if I click on the dropdown of the paginator, the products are rendered.

I also tried to combine it with the OnInit but this does not load it as well. Only when I use only the OnInit method and I remove the lazy="true" and onLazyLoad, my table is rendered correctly.

I also tried to play with observable in an extra container around it and use *ngIf with the async pipe, but did does not work as the OnInit method (which is necessary to populate the initial products observable) does not work together with the OnLazyLoad method (it keeps firing TableLazyLoadEvents)

I have found the problem, which was impossible for you to know with the information given.

In my component.ts I had configured

@Component({
     ...
    changeDetection: ChangeDetectionStrategy.OnPush
})

changing this to

@Component({
     ...
    changeDetection: ChangeDetectionStrategy.Default
})

resolved my problem