Angular ExpressionChangedAfterItHasBeenCheckedError

Question

I have a problem with my data table. When I am loading data I want to show busy indicator. This is achieved by this.loading passed into DataTableComponent. Everything works fine (switching between pages, searching), but when I change pageSize (same method Load) I get ExpressionChangedAfterItHasBeenCheckedError

I have VendorsComponent which contains method Load

load(loadParams: IDatatableLoadEvent): void {
   this.loading = true;
    this.vendorService.loalAll(loadParams.sortBy, loadParams.currentPage, loadParams.pageSize, loadParams.searchTerm, loadParams.sortOrder.toLowerCase())
    .subscribe((res: HttpResponse<IVendor[]>) => {
      this.filteredData = res.body;

      // we have to set x-pagination to COSR rules on API server
      const xPagination = res.headers.get('x-pagination');
      this.filteredTotal = JSON.parse(xPagination).totalCount;

      this.loading = false;
      // Hack - because we are setting loading and until data are loaded
      // we have to stop changeDetection and tell angular when to detect changes
      // - this happens only when we are changing pagesize
      this.cdr.detectChanges();
    }, error => {
      this.loading = false;
    });
  }

Here is how loading bar is implemented in dataTable Component:

I've created a simple example here Demo, but It doesn't load data, so you can't try the exception. But it's enough for a better overview.

I've found one solution for this problem - to manually setting up Change Detection but I would like to know if this is the correct approach.