Primeng loading icon is not updating

Question

I am using primeng turbo table with lazy loading and enabled loading to attribute it's not getting updated even got updated

<p-table #dt [loading]="loader" [columns]="cols" [value]="datasource.merchants" [rows]="perPage" [paginator]="true" [pageLinks]="5"
      [lazy]="true" [totalRecords]="datasource.totalCount" (onLazyLoad)="loadLazyData($event)" [exportFilename]="'merchant-list'">
.....

Script

loadLazyData(event: LazyLoadEvent) {    
    if (event.first !== this.searchParams.offset || event.rows !== this.searchParams.limit) {
      this.loader = true;
      this.searchParams.offset = event.first;
      this.searchParams.limit = event.rows;
     this.apiService.getResponse(this.smartSearchParams.query, event.first, event.rows)
          .subscribe((result) => {
            this.datasource = result;
            let newArray = result.merchants.slice();
            this.dataTable.value = newArray;
            setTimeout(() => {
              this.loader = false;
              this.dataTable.loading = this.loader;
            });
          }, (err: any) => {
            setTimeout(() => {
              this.loader = false;
              this.dataTable.loading = this.loader;
            });
          });

      }

can someone help me with this issue

Answer 1

The issue is with changeDetection for the component.

I have removed the changeDetection:ChangeDetectionStrategy.OnPush from my component its started working