Angular pagination-controls throw exception ExpressionChangedAfterItHasBeenCheckedError

Question

I am building a page that has dynamic tabs from the DB, and each tab has a pagination (I use pagination-controls) .. When I choose one tab I am getting this error :

ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '12'. Current value: '9'.. Find more at https://angular.io/errors/NG0100 at throwErrorIfNoChangesMode (core.js:6792)

How can I create dynamic tabs with pagination-controls ?

My full code

home.html (the parent)

<tabset [justified]="true">
        <tab heading="Tab1" (selectTab)="selectCurrenTab($event)">
            <app-older></app-older>
        </tab>
        <tab *ngFor="let data of datas; let index = index"  [heading]="data?.name" >
            <app-tab></app-tab>
        </tab>
    </tabset>

tab.component.ts (child 1)

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-tabs',
  templateUrl: './tabs.component.html',
  styleUrls: ['./tabs.component.css']
})
export class TabsComponent implements OnInit {
private currentPage = 1;
  private itemsPerPage = 12;

 constructor(private cdref: ChangeDetectorRef  ) { }
  ngOnInit(): void { }
  ngAfterViewChecked(){
    this.cdref.detectChanges();
  }

 onItemsPerPageChange(numberItem) {
    this.itemsPerPage = numberItem;
    this.loadData();
  }
 onPageChange(event) {
    this.currentPage = event;
  }
}

tabs.component.html

<ngx-row *ngFor="let data of datas| paginate: {  itemsPerPage: itemsPerPage, currentPage: currentPage, totalItems: itemsTotal }; let i = index;">
  <ngx-col>....</ngx-col>
</ngx-row>
 <div class="row">
    <div class="col-sm-8">
       <pagination-controls  (pageChange)="onPageChange($event)">
       </pagination-controls> 
   </div>
    <div class="col-sm-4">
        <ul class="pagination pull-right float-sm-right">
           <li id="li10" (click)="onItemsPerPageChange(12)">
                <a class="page-link pointer">10</a>
           </li>
            <li id="li15" class="page-item" (click)="onItemsPerPageChange(15)">
                 <a class="page-link pointer">15</a>
            </li>
       </ul>
   </div>
</div>

What wrong ?