How to make Server Side Pagination in Angular 13 ?

Today now in this post i will show you How to make Server Side Pagination in Angular 13 ? So in this article i will provide the some of the most important example of angular 13 server side pagination example.Here I’m going to show you about the angular 13 pagination example. Now here i will use agular 13 ngx-pagination example. Here i will teach about how to create pagination in angular 13. So, let’s start and follow the few step to create example of angular 13 implement pagination example.

Now in this tutorial, I will give from you step by step server side pagination example by using ngx-pagination npm package which we can use angular 13. So let’s start and the follow bellow step to make this example.

Step 1: Create New App

We can easily create our angular 13 application by using the bellow command:

ng new my-new-app
Step 2: Install ngx-pagination

Now in this step, i will install the ngx-pagination package. So let’s install by the following command:

npm install ngx-pagination --save
Step 3: Import Modules

Now in this step, i have to import the HttpClientModule and NgxPaginationModule to the app.module.ts file. So let’s need to import it as like as bellow:

src/app/app.module.ts

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

Step 4: Create Service for API

So here, i have to create the service for the http client request. Now i will create the service file and then write client http request code. So this service i will use in our component file.

So let’s start and create service and put the bellow code:

ng g s services/users

Now let’s add the code as like as bellow:

src/app/services/users.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
  
@Injectable({
  providedIn: 'root'
})
export class UsersService {
  
  private url = 'https://reqres.in/api/users';
     
  constructor(private httpClient: HttpClient) { }
    
  getUsers(page: number){
    return this.httpClient.get(this.url + '?page=' + page);
  }
}
Step 5: Use Service to Component

Now i have to use this services to our app component. So let’s need to updated code as like as bellow:

src/app/app.component.ts

import { Component, OnInit } from '@angular/core';
import { UsersService } from './services/users.service';
    
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  users:any;
  p: number = 1;
  total: number = 0;
    
  constructor(private service:UsersService) {}
    
  /*------------------------------------------
  --------------------------------------------
  About 
  --------------------------------------------
  --------------------------------------------*/
  ngOnInit() {
    this.getUsers();
  }
  
  /**
   * Write code on Method
   *
   * @return response()
   */
  getUsers(){
      this.service.getUsers(this.p)
        .subscribe((response: any) => {
          this.users = response.data;
          this.total = response.total;
        });
  } 
  
  /**
   * Write code on Method
   *
   * @return response()
   */
  pageChangeEvent(event: number){
      this.p = event;
      this.getUsers();
  }
}
Step 6: Updated View File

So here, i will updated our html file. let’s need put the bellow code:

src/app/app.component.html

<div class="container">
  <h1>Angular Pagination Example - ItSolutionStuff.com</h1>
   
  <table class="table table-bordered">
    <tr>
      <th>ID</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
    </tr>
    <tr *ngFor="let user of users| paginate: { itemsPerPage: 6, currentPage: p, totalItems: total }">
        <td>{{ user.id }}</td>
        <td>{{ user.first_name }}</td>
        <td>{{ user.last_name }}</td>
        <td>{{ user.email }}</td>
    </tr>
  </table>  
  
  <pagination-controls (pageChange)="pageChangeEvent($event)"></pagination-controls>
</div>
Run Angular App:

That’s good all required steps have been completed , now we need to type the given below command and then hit enter to run the Angular app:

ng serve

Read Also: How To Implement Laravel 9 form validation ?

Thanks for read. I hope it help you. For more you can follow us on facebook

close

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →