How to implement Bootstrap 4 for Angular 2 ngb-pagination

Question

I have a Angular2 app with a component where I have a table. Table is generated via *ngFor directive. Each row of the table

Answer 1

I was searching for answers to this same question and nobody seems to post a clear answer.

Here's my solution:

ngbPagination with ngFor in Angular 7

export class HomeComponent implements OnInit {


currentPage = 1;
itemsPerPage = 5;
pageSize: number;

constructor() { }

  public onPageChange(pageNum: number): void {
    this.pageSize = this.itemsPerPage*(pageNum - 1);
  }
  
  public changePagesize(num: number): void {
  this.itemsPerPage = this.pageSize + num;
}

}

    

        

            
        
        

            
        
    
    

        

            
            
{{ user.id }}. {{ user.first_name }} {{ user.last_name }}
        
    
    
Page: {{ currentPage }} / {{numPages.pageCount}}Found items: {{ itemsPerPage }} / {{ users.length }}

This solution also applies to Angular 6. I have not tested it on other versions.

For more information, check the documentation. Unfortunatley... it lacks vital information regarding ngFor iteration.

Another problem I had was how to set the number of pages. I decided to add my complete solution for those having the same problem. I found this answer here. Take note of the identifier #numPages above. Here is a live demo on stackblitz