server-side-pagination-node-js-angular-feature-image

Server side Pagination with Node.js and Angular

In this tutorial, I will show you how to build a full-stack (Angular 10 + 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 Post: Angular 10 + Node.js Express: JWT Authentication & Authorization example

Serverless with Firebase:
Angular 10 Firebase CRUD Realtime Database
Angular 10 Firestore CRUD with AngularFireStore


Node.js + Angular: Server side Pagination example

Assume that we have tutorials table in database like this:

server-side-pagination-node-js-angular-mysql-database

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:

server-side-pagination-node-js-angular-ui

You can change to a page with larger index:

server-side-pagination-node-js-angular-ui-change-page

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

server-side-pagination-node-js-angular-ui-change-size

Or paging with filter:

server-side-pagination-node-js-angular-ui-paging-filter

Full-stack Architecture

We’re gonna build the application with following architecture:

server-side-pagination-node-js-angular-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:

server-side-pagination-node-js-angular-project-structure

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 for this Angular front-end can be found at one of following posts:
Node.js Express Pagination with MySQL & Sequelize
Node.js Express Pagination with MongoDB & Mongoose

Angular Pagination Client

Overview

server-side-pagination-node-js-angular-front-end-components

– 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:

server-side-pagination-node-js-angular-front-end-project

– 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 make the build front-end application 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

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:
– Back-end:

– Front-end:

You may want to know:
Angular 10 + Node.js Express: JWT Authentication & Authorization example

Serverless with Firebase:
Angular 10 Firebase CRUD Realtime Database
Angular 10 Firestore CRUD with AngularFireStore

Happy learning, see you again!

Leave a Reply

Your email address will not be published. Required fields are marked *