Example of grid pagination with Bootstrap (TypeScript file)

students.component.ts

import { StudentService } from 'src/app/services/student.service';
import {NgbPaginationConfig} from '@ng-bootstrap/ng-bootstrap'; 

@Component({
  selector: 'app-students',
  templateUrl: './students.component.html',
  styleUrls: ['./students.component.css'],
  providers: [NgbPaginationConfig]
})
export class StudentsListComponent implements OnInit {

  studentsList: Student[];
  totalItems: number;
  page: number;
  previousPage: number;
  showPagination: boolean;

  constructor(
    private route: ActivatedRoute,
    private studentService: StudentService,
    private config: NgbPaginationConfig,
    private router: Router) {
      this.config.boundaryLinks = true;
  }

  ngOnInit() {
	this.page =1;
	this.previousPage =1;
    this.fillStudents();
  }
  
  fillStudents(page : number) : void {
	  this.studentService.getStudents(page).subscribe(
		  data => {
			if ((!data && !data.result) || (data && data.result && data.result.length ==0)) {
			  this.studentsList = [];
			  this.showPagination = false;
			}
			else {
			  this.studentsList = data.result;
			  this.totalItems = data.totalAmount;
			  this.showPagination = true;
			}

		  },
		  error => {
			// Aquí se debería tratar el error, bien mostrando un mensaje al usuario o de la forma que se desee.
		  }
		);
  }
  
  loadPage(page: number) {
    if (page !== this.previousPage) {
      this.previousPage = page;
      this.fillStudents(this.page-1);
    }
  }



}