How to Create Server Side Pagination in Angular 16 App

In this tutorial, we will teach you how to create server-side pagination in Angular application. We will fetch the data from the server using a Rest Api and display data in the UI table within the Angular component with the pagination module. To build the pagination component in angular, we will use the npx pagination package.

Pagination provides an organized way to separate large amounts of data into discrete pages on a web and mobile application. Site users often use pagination to navigate between pages by clicking on the pagination links.

In general, it resides at the bottom of the UI table or UI card elements in the form of numbers. Pagination navigation also contains page numbers and previous and next buttons.

Angular 16 Server Side Pagination Implementation Example

• Step 1: Install Angular CLI
• Step 2: Download Latest Angular App
• Step 3: Install Bootstrap Package
• Step 4: Add Ngx Pagination Module
• Step 5: Update App Module Class
• Step 6: Configure Angular Service
• Step 7: Implement Pagination in Angular
• Step 8: Start Development Server

Install Angular CLI

We need to have latest version of Angular cli in our development system. In order to install the angular cli execute the given command.

sudo npm install -g @angular/cli

Download Latest Angular App

On the terminal console, type the given command then hit enter.

ng new ng-demo

Above command will install a new angular app on your system. Your next step is to go to the application folder.

cd ng-demo

Install Bootstrap Package

Next, add the suggested command on the console, hit enter to install the Bootstrap using the npm.

npm install bootstrap

Then, add the Bootstrap CSS file to the apps[0].styles array inside the angular.json file.

"styles": [
    "styles.scss",
    "./node_modules/bootstrap/dist/css/bootstrap.min.css"
],

Add Ngx Pagination Module

We are now going to install the ngx-pagination in our angualr app.

npm install ngx-pagination

Update App Module Class

Open the app/app.module.ts file, import NgxPaginationModule and HttpClientModule packages and also inject them into the imports array.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgxPaginationModule } from 'ngx-pagination';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    NgxPaginationModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Configure Angular Service

We need a service where we can write code to make the api call that gets the data for our angular server-side pagination component.

ng g s services/students

As soon as we executed the above command, a services folder and students.service.ts file created. Open the file and add the suggested code into the file.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
  providedIn: 'root',
})
export class StudentsService {
  private url = 'https://reqres.in/api/users';
  constructor(private httpClient: HttpClient) {}
  getStudents(page: number) {
    return this.httpClient.get(this.url + '?page=' + page);
  }
}

Implement Pagination in Angular

Head over to app.component.ts file, import the StudentsService, inject it into the constructor method, create the function, invoke the getStudents() method and set the pagination..

import { Component, OnInit } from '@angular/core';
import { StudentsService } from './services/students.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  Students: any;
  allStudents: number = 0;
  pagination: number = 1;
  constructor(private studentsService: StudentsService) {}
  ngOnInit() {
    this.fetchStudents();
    console.log(this.fetchStudents());
  }
  fetchStudents() {
    this.studentsService.getStudents(this.pagination).subscribe((res: any) => {
      this.Students = res.data;
      this.allStudents = res.total;
      console.log(res.total);
    });
  }
  renderPage(event: number) {
    this.pagination = event;
    this.fetchStudents();
  }
}

Next, we have to look for the app.component.html file in the src/ folder, then insert the given code into the file and create the view for table and pagination elements.

<div class="container mt-5">
  <h2 class="mb-3 text-center">Angular 16 Server Side Pagination Example</h2>
  <table class="table">
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">First name</th>
        <th scope="col">Last name</th>
        <th scope="col">Email</th>
      </tr>
    </thead>
    <tbody>
      <tr
        *ngFor="
          let student of Students
            | paginate
              : {
                  itemsPerPage: 6,
                  currentPage: pagination,
                  totalItems: allStudents
                }
        "
      >
        <td scope="row">{{ student.id }}</td>
        <td>{{ student.first_name }}</td>
        <td>{{ student.last_name }}</td>
        <td>{{ student.email }}</td>
      </tr>
    </tbody>
  </table>
  <div class="d-flex justify-content-center">
    <pagination-controls
      (pageChange)="renderPage($event)"
    ></pagination-controls>
  </div>
</div>

Start Development Server

We are now going to test the angular app, make sure to start the angular app and test the app on the following url.

ng serve --open

http://localhost:4200

Conclusion

In this Angular table pagination example guide, we have learned how to build a pagination module and display paginated data with a table in the Angular application.