Do you have plan to add onPageChage event ?

[lacroixdavid1]

You can subscribe to onPageChange event

export class MyComponent implements OnInit {
  @ViewChild('dataTable') dataTable: DataTable; 
  ngOnInit() {
        this.dataTable.onPageChange.subscribe((x) =>{
        console.log('Current page : ' + x.activePage);
        console.log('Rows on page : ' + x.rowsOnPage);
        });
   }
}

[ghost]

@lacroixdavid1 Can you give me the code for HTML also? I am getting this error TypeError: Cannot read property 'onPageChange' of undefined

[PavelDanyliuk]

@UnnikrishnanMR in code below, you need to change

@ViewChild('dataTable') dataTable: DataTable; 
 to 
 @ViewChild(DataTable) dataTable: DataTable; 

[lacroixdavid1]

<table [mfData]="dataService.productList"
       #dataTable="mfDataTable"
       [mfRowsOnPage]="dataService.rowsOnPage"
       [mfActivePage]="dataService.lastSelectedPage">
  <thead>
    <tr>
      <th>
        <mfDefaultSorter by="value">Col header</mfDefaultSorter>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of dataTable.data">
      <td>item.value</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>
        <mfBootstrapPaginator [rowsOnPageSet]="[20,50,100,250,1000]"></mfBootstrapPaginator>
      </td>
    </tr>
  </tfoot>
</table>

export class MyComponent implements OnInit {
  @ViewChild('dataTable') dataTable: DataTable; 
  ngOnInit() {
        this.dataTable.onPageChange.subscribe((x) =>{
        console.log('Current page : ' + x.activePage);
        console.log('Rows on page : ' + x.rowsOnPage);
        });
   }
}

[lacroixdavid1]

Or you could do

<table [mfData]="dataService.productList"
       #dataTable="mfDataTable"
       (onPageChange)="pageChangedAction()"
       [mfRowsOnPage]="dataService.rowsOnPage"
       [mfActivePage]="dataService.lastSelectedPage">
  <thead>
    <tr>
      <th>
        <mfDefaultSorter by="value">Col header</mfDefaultSorter>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of dataTable.data">
      <td>item.value</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>
        <mfBootstrapPaginator [rowsOnPageSet]="[20,50,100,250,1000]"></mfBootstrapPaginator>
      </td>
    </tr>
  </tfoot>
</table>

export class MyComponent  {
  pageChangedAction(x) {
        console.log('Current page : ' + x.activePage);
        console.log('Rows on page : ' + x.rowsOnPage);
   }
}

[AdonousTech]

@lacroixdavid1 @UnnikrishnanMR If you get the undefined message above, it is because the ViewChild is not available in ngOnInit. You need to access it in ngAfterViewInit

export class MyComponent implements OnInit {
  @ViewChild('dataTable') 
  private dataTable: DataTable; 
  ngAfterViewInit() {
        this.dataTable.onPageChange.subscribe((x) =>{
        console.log('Current page : ' + x.activePage);
        console.log('Rows on page : ' + x.rowsOnPage);
        });
   }
}

[HerrSlavchev]

Please check this issue as well. I think it would allow an approach which is more native to Angular's subscription model #70