Why pagination with Bootstrap does not work?

Question

I was trying to use pagination by following this link:

https://ng-bootstrap.github.io/#/components/table/examples (under Pagination)

It just doesn't work properly. In fact, if I wanted to have only 3 lines on the first page (then I change pageSize by setting it to 3) I get all the lines (4) and not 3.

Where did I go wrong? Thanks everyone for the help

ts file

import { Product } from '../product';
import { Observable, Subject } from "rxjs";
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import {map} from 'rxjs/operators';

import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {

  constructor(private productservice: ProductService, private fb: FormBuilder, private modalService: NgbModal) {} 

  productsArray: any[] = [];
  dtTrigger: Subject<any> = new Subject();

  products: Product[] = [];
  product: Product = new Product();
  productlist: any;
  page = 1;
  pageSize = 4;
  collectionSize = 8;


  ngOnInit() {
      this.productservice.getProductList().subscribe(data => {
          this.products = data;
          this.dtTrigger.next();
          this.refreshProduct();
      })
      this.editProfileForm = this.fb.group({
          productcode: [''],
          name: ['']
      });
  }

  refreshProduct() {
      this.productsArray = this.products
          .map((product: any, i: number) => ({ id: i + 1, ...product }))
          .slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize + this.pageSize);
  }

html file

<div class="panel-body">
    <table class="table table-hover table-sm">
      <thead class="thead-light">
        <tr>
          <th>Product code</th>
          <th>Product name</th>
          <th>Product image</th>
          <th>Action</th>

        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let product of products">
          <td>{{product.productcode}}</td>
          <td>{{product.name}}</td>
          <td class="py-1"><img src="data:image/png;base64"  width="80" height="80"></td>
          <td><button (click)="deleteProduct(product.productcode)" class='btn btn-primary'><i
                class="fa fa-futboll-0">Delete</i></button>
            <button type="button" class="btn btn-primary" (click)="openModal(editProfileModal, product)" >Update</button>
          </td> 
        </tr>
      </tbody><br>
    </table>
    <div class="d-flex justify-content-between p-2">
      <ngb-pagination [collectionSize]="collectionSize" [(page)]="page" [pageSize]="pageSize" (pageChange)="refreshProducts()">
      </ngb-pagination>
    </div>
  </div>
</div>

Answer 1

You need to change products inside ngFor to productsArray.

"products" will always have the full list. you always use "products" to fill "productsArray" depending on your needs, and what you wanna display on the UI.