Server side Pagination with Node.js and Angular

In this tutorial, I will show you how to build a full-stack (Angular 16/15/14/13/12/11/10/8 + Node.js Server side Pagination) example. The back-end server uses Node.js + Express for REST APIs, front-end side is an Angular App with HTTPClient.

Related Posts:
– Angular + Node.js Express + MySQL example: CRUD App
– Angular + Node.js Express + PostgreSQL example: CRUD App
– Angular + Node.js Express + MongoDB example: CRUD App
– Angular 15 + Node.js Express: File Upload example
– Angular 15 + Node.js Express: JWT Authentication & Authorization example

Node + Angular: Server side Pagination example

Assume that we have tutorials table in database like this:

We need to export APIs for pagination (with/without filter) as following samples:

• /api/tutorials?page=1&size=3
• /api/tutorials?size=5: using default value for page
• /api/tutorials?title=data&page=1&size=5: pagination & filter by title containing ‘data’
• /api/tutorials/published?page=2: pagination & filter by ‘published’ status

This is structure of the result that we want to get from the APIs:

{
    "totalItems": 12,
    "tutorials": [...],
    "totalPages": 3,
    "currentPage": 1
}

Our Angular app will display the result with pagination:

You can change to a page with larger index:

Or change page size (quantity of items per page):

Or paging with filter:

Full-stack Architecture

We’re gonna build the application with following architecture:

– Node.js Express exports REST APIs & interacts with Database using Sequelize ORM/ Mongoose ODM.
– Angular Client sends HTTP Requests and retrieves HTTP Responses using HTTPClient, consume data on the components. Angular Router is used for navigating to pages.

Node.js Server side Pagination

Overview

The Node.js Server will be built using Express with Sequelize ORM or Mongoose ODM.

It can export API with endpoint that supports both pagination and filter:
api/tutorials?title=[keyword]&page=[index]&size=[number]

The response structure looks like this:

{
  "totalItems": 12,
  "tutorials": [
    {
      "id": 6,
      "title": "Microservices Tut#6",
      "description": "Tut#6 Description",
      "published": false
      "createdAt": "2020-09-10T11:12:30.000Z"
    },
    {
      "id": 7,
      "title": "MongoDB Database Tut#7",
      "description": "Tut#7 Description",
      "published": true
      "createdAt": "2020-09-10T11:12:30.000Z"
    },
    {
      "id": 8,
      "title": "MySQL Database Tut#8",
      "description": "Tut#8 Description",
      "published": true
      "createdAt": "2020-09-10T11:12:30.000Z"
    }
  ],
  "totalPages": 3,
  "currentPage": 1
}

Project Structure

This is the structure of the project that we’re gonna build:

Let me explain it briefly.

– db.config.js exports configuring parameters for database connection & ORM/ODM.
– Express web server in server.js where we configure CORS, initialize & run Express REST APIs.
– Next, we add configuration for MySQL database in models/index.js, create data model in models/tutorial.model.js.
– Tutorial controller in controllers.
– Routes for handling all CRUD/Pagination operations (including custom finder) in tutorial.routes.js.

Implementation

Step by step to make the Server side Pagination back-end (with Github) for this Angular front-end can be found at one of following posts:
– Node.js Express Pagination with MySQL example
– Node.js Express Pagination with PostgreSQL example
– Node.js Express Pagination with MongoDB example

Angular Pagination Client

Overview

– The App component is a container with router-outlet. It has navbar that links to routes paths via routerLink.

– TutorialsList component gets and displays Tutorials with pagination and filter.
– Tutorial component has form for editing Tutorial’s details based on :id.
– AddTutorial component has form for submission new Tutorial.

– These Components call TutorialService methods which use Angular HTTPClient to make HTTP requests and receive responses.

Project Structure

Now here is the directory of our Angular Client:

– There are 3 components: tutorials-list, tutorial-details, add-tutorial.
– tutorial.service has methods for sending HTTP requests to the Apis.
– app-routing.module.ts defines routes for each component.
– app component contains router view and navigation bar.
– app.module.ts declares Angular components and import necessary modules.

Implementation

Step by step to build front-end application (with Github) for the Server side pagination back-end can be found at one of following posts:
– Angular 8 Pagination example | ngx-pagination
– Angular 10 Pagination example | ngx-pagination
– Angular 11 Pagination example | ngx-pagination
– Angular 12 Pagination example | ngx-pagination
– Angular 13 Pagination example | ngx-pagination
– Angular 14 Pagination example | ngx-pagination
– Angular 15 Pagination example | ngx-pagination
– Angular 16 Pagination example | ngx-pagination

Conclusion

Now we have an overview of Angular + Node.js Express Server-side pagination example when building a full-stack App.

We also take a look at client-server architecture for REST API using Express & Sequelize ORM or Mongoose ODM, as well as Angular project structure for building a front-end app to make HTTP requests and consume responses.

Next tutorials show you more details about how to implement the system (with Github):
– Back-end:

• Node.js Express Pagination with MySQL example
• Node.js Express Pagination with PostgreSQL example
• Node.js Express Pagination with MongoDB example

– Front-end:

• Angular 8 Pagination
• Angular 10 Pagination
• Angular 11 Pagination
• Angular 12 Pagination
• Angular 13 Pagination
• Angular 14 Pagination
• Angular 15 Pagination
• Angular 16 Pagination

You may want to know how to run both projects in one place:
How to Integrate Angular with Node.js Restful Services

Fullstack CRUD App:
– Angular + Node.js Express + MySQL example: CRUD App
– Angular + Node.js Express + PostgreSQL example: CRUD App
– Angular + Node.js Express + MongoDB example: CRUD App

Or Security: Angular 15 + Node.js Express: JWT Authentication & Authorization example

File Upload: Angular 15 + Node.js Express: File Upload example

Happy learning, see you again!