0

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 ?

user1814879
  • 984
  • 6
  • 23
  • 49
  • Why do you call detectChanges in ngAfterViewChecked? That will tell Angular to rerun change detection, but Angular will already be checking your template for changes automatically. There are cases where you need to trigger change detection manually (e.g. when you change the change detection strategy to onPush) but this doesn't look like one of them. – G Dan May 21 '21 at 13:03
  • I use It because at some post, some people told that it was resolved issue with this... – user1814879 May 21 '21 at 13:35
  • I found the solution here [https://stackoverflow.com/questions/45588455/multiple-ngx-pagination-error-angular-2](https://stackoverflow.com/questions/45588455/multiple-ngx-pagination-error-angular-2) – senko.yaroslav Feb 15 '22 at 12:54

0 Answers0