Example of Angular 9 Pagination Using ngx-pagination

app.component.html

<h1 style="text-align: center; color:orange; font-size:45px">Example of
Angular 9
Pagination Using ngx-pagination</h1>

<table class="table table-striped">

  <thead>

  <tr>

  <th>Gender</th>

  <th>Name</th>

  <th>Email</th>

  <th>Picture</th>

  </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}}"></td>

 </tr>

  </tbody>

  </table>

  <div>

    <pagination-controls  id="listing_pagination" maxSize="5"
directionLinks="true"
(pageChange)="page = $event"></pagination-controls>

  </div>

app.component.ts

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

import { RandomService } from './random.service';

@Component({

  selector: 'app-root',

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

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

})

export class AppComponent {

data:Array<any>

totalRecords:number

page:number =1

  constructor(private random:RandomService)

  { this.data = new Array<any>() }

  ngOnInit() {

     this.getUsers();

    }

  getUsers(){

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

    console.log(data)

    this.data = data.results

    this.totalRecords = data.results.length

    console.log(this.page)

    })

  }

}

app.module.ts

=> npm install ngx-pagination --save

=> import {NgxPaginationModule} from 'ngx-pagination'; 

=> imports: [NgxPaginationModule],

import {HttpClientModule} from '@angular/common/http';

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

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

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { RandomService } from './random.service';

import { NgxPaginationModule } from 'ngx-pagination';

@NgModule({

  declarations: [AppComponent],

  imports: [

    HttpClientModule,

    BrowserModule,

    NgxPaginationModule,

    AppRoutingModule,

  ],

  providers: [RandomService],

  bootstrap: [AppComponent]

})

export class AppModule { }

random.service.ts

=> ng g s random

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

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

import { Observable } from 'rxjs';

@Injectable({

  providedIn: 'root'

})

export class RandomService {

  constructor(private http:HttpClient) { }

  getData():Observable<any>{

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

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

  }

}