Angular 14 Http Request & Display Pagination Example Using ngx-pagination Module and Bootstrap 5 in TypeScript

Welcome folks today in this blog post we will be looking on how to do pagination after http request in angular 14 using ngx-pagination module and bootstrap 5 in typescript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new angular project using the below command

ng new angularpagination

cd angularpagination

Now we need to install the required dependencies for this angular application as shown below

npm i ngx-pagination

After installing this library this is the directory structure of the angular app as shown below

And now we need to go to app.module.ts file and copy paste the below code to include the module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
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 { }

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

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 { }

As you can see in the above code we are just importing the ngx-pagination module and including it inside the imports array. And also for making the HTTP requests inside the angular app we are importing the built in HttpClientModule at the very top and then including it inside the imports array.

Creating the HTTP Service in Angular

Now at the command line we will create the http service where we will making the request using observables and rxjs. For this you need to execute the below command as shown below

ng generate service services/randomUser

1	ng generate service services/randomUser

As you can see in the above command we are generating the service and we are making the services folder and inside it we are making the randomUser service as shown below

As you can see this above command will create a services folder inside the app directory as shown below

And now we need to write the code inside the random-user.service.ts file and copy paste the below code

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http'
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class RandomUserService {

  constructor(private http:HttpClient) { }

  getData():Observable<any>{
    const url = "https://randomuser.me?results=100"
    return this.http.get<any>(url)
  }
}

import { Injectable } from '@angular/core';

import {HttpClient} from '@angular/common/http'

import { Observable } from 'rxjs';

@Injectable({

providedIn: 'root'

})

export class RandomUserService {

constructor(private http:HttpClient) { }

getData():Observable<any>{

const url = "https://randomuser.me?results=100"

return this.http.get<any>(url)

}

As you can see we are first of all importing the httpClient module for performing the http request and then we are also importing the observable from the rxjs library. And then we are simply defined the method which is called getData() which actually calls the url using the get() method and then we are simply calling the randomUser rest api to get the data.

Now guys we will be importing the service inside the main file which is app.component.ts file as shown below

app.component.ts

import { Component } from '@angular/core';
import { RandomUserService } from './services/random-user.service';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  data!:Array<any>;
  totalRecords:any;
  page:Number=1

  constructor(private randomUser:RandomUserService) {
    this.data = new Array<any>()
   }
}

import { Component } from '@angular/core';

import { RandomUserService } from './services/random-user.service';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

data!:Array<any>;

totalRecords:any;

page:Number=1

constructor(private randomUser:RandomUserService) {

this.data = new Array<any>()

}

As you can see we are declaring the variables and also we are importing the service that we created to make the HTTP Request. And then we are calling the random User api. Now we need to go to app.component.html file and copy paste the below code

Now we need to go to app.component.html file and copy paste the below code

app.component.html

<button (click)="getUsers()">Get Users</button>

1	<button (click)="getUsers()">Get Users</button>

As you can see in the above code we are attaching the onclick event handler. So when we click the button of Get Users. It will execute the getUsers() method which is shown below

getUsers(){
    this.randomUser.getData().subscribe((data) => {
      console.log(data)
      this.data = data.results
      this.totalRecords = data.results.length
    })
  }

getUsers(){

this.randomUser.getData().subscribe((data) => {

console.log(data)

this.data = data.results

this.totalRecords = data.results.length

})

}

As you can see in the above code we are using the service method which is getData() to get the randomUser and we subscribe to the method and after that we get the data and then we are initializing two variables which is the data and the totalRecords. This will helpful for displaying the pagination.

Adding the HTML Code for Pagination

Now go to app.component.html file and copy paste the below code to show the pagination with different controls to go forward and backwards

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<button class="btn btn-danger" (click)="getUsers()">Get Users</button>
<table class="table table-striped">
<thead>
  <tr>
    <th>Name</th>
    <th>Gender</th>
    <th>Email</th>
    <th>Picture</th>
  </tr>
</thead>
<tbody>
  <tr *ngFor="let user of data | paginate :{id:'listing_pagination',
    itemsPerPage:10,
    currentPage:page,
    totalItems:totalRecords }">
    <td>{{user.gender}}</td>
    <td>{{user.name.first}}</td>
    <td>{{user.email}}</td>
    <td><img src="{{user.picture.medium}}" alt=""></td>
  </tr>
</tbody>
</table>
<div>
  <pagination-controls id="listing-pagination" maxSize="5" (pageChange)="page=$event">

  </pagination-controls>
</div>

<button class="btn btn-danger" (click)="getUsers()">Get Users</button>

<thead>

<tr>

<th>Gender</th>

<th>Email</th>

<th>Picture</th>

</tr>

</thead>

<tbody>

<tr *ngFor="let user of data | paginate :{id:'listing_pagination',

itemsPerPage:10,

currentPage:page,

totalItems:totalRecords }">

<td>{{user.gender}}</td>

<td>{{user.name.first}}</td>

<td>{{user.email}}</td>

</tr>

</tbody>

</table>

<div>

<pagination-controls id="listing-pagination" maxSize="5" (pageChange)="page=$event">

</pagination-controls>

</div>