Angular 7 Uploads Backed by Node.js

Angular 7 Uploads Backed by Node.js

<strong>In this tutorial, you'll learn how to create an app with a backend built on Node.js and Express, and a front-end created with Angular 7.</strong>

In this tutorial, you'll learn how to create an app with a backend built on Node.js and Express, and a front-end created with Angular 7.

Web development has become more dynamic with time, mostly due to the continued development of various languages, tools, and frameworks, one of them being Angular. The recent release of Angular 7 comes with new features, such as virtual scrolling, drag and drop, and some CLI updates, among others.

In this article, we will be building an application that shows how file upload works (specifically, image upload). It also uses the Angular Material and its CDK module to show the drag and drop feature introduced with Angular v7.

Below is a screenshot of what we will be building:


Getting Started: Configuring the Development Environment
  • For this tutorial, you can download and install the Angular IDE.
  • However, if you already have an Eclipse installation you are happy with, you can add Angular IDE to it from the Eclipse marketplace.
  • If you already have CodeMix installed, simply ensure you have the Angular extension Pack installed from the Extension Manager at Help > CodeMix Extensions.
Creating an Angular Project Using Angular IDE

We will create our application using the Angular IDE project wizard. We will be using Angular CLI version 7.3.6 and the latest version of all the tech libraries and stacks, as at the time of this writing. To create a new Angular project, navigate to File>New>Angular Project.

The next step is to add the Angular Material module that also adds the CDK module (which contains the drag and drop feature in Angular v7). Note that this also optionally adds the animation module. We will include the Angular Material module by running the command below in Terminal+:

ng add @angular/material

At this stage, we will move on to pulling in some dependencies that we will use to build the application with the command below:

npm install --save express cors multer mkdirp 
  • Express is a Node.js module that simplifies the creation of a node server.
  • Cors is a Node.js module that provides a middleware to handle cross-origin resource sharing.
  • Multer is a Node.js middleware for handling “multipart/form-data,” which is primarily used for uploading files.
  • Mkdirp is a Node.js module for directory creation.
Setting Up the Backend Server

Now, we can begin the development of the application. First, we will create a server.js file in the root directory of our application. This file will contain the server setup, multer configuration, and the only route of the application. The route will accept the files submitted, save them, and return a path to the files.

const express = require('express');
const multer = require('multer');
const cors = require('cors');
const mkdirp = require('mkdirp');
const app = express();
const PORT = 5000;
const URL = `http://localhost:${PORT}/`;
app.use(express.static('public'))
var storage = multer.diskStorage({
    destination: (req, file, cb) => {
        const dir = './public/images/uploads';
        mkdirp(dir, err => cb(err, dir))
    },
    filename: (req, file, cb) => {
        cb(null, Date.now() + '-' + file.originalname)
    }
});
const upload = multer({ storage })
app.use(cors());
app.post('/upload', upload.single('image'), (req, res) => {
    if (req.file) {
        res.json({imageUrl: `${URL}images/uploads/${req.file.filename}`});
    }
    else{
        res.status("409").json("No Files to Upload.");
    } 
});
app.listen(PORT);
console.log('api runnging on port: ' + PORT);

In the code snippet above, we set up Express to load files in the public directory in the root of the project as static or public files. This allows the files to be rendered through requests to the file path from the root URL. For example, for a file image.jpg in the public directory, a request to http://localhost:5000/image.jpg from the browser will render the image.

Next, we set up the configuration for the multer middleware, which determines how and where the files are to be saved. In this case, we store the files in the public/images/uploads directory. In this setup, we made use of the mkdirp module to create the uploads directory, if it doesn’t exist.

Afterwards, we created the route to which the images will be posted. On the route definition, the multer middleware (object) is passed as a parameter. This helps the route to accept single file upload, with the expected file in the field name image. We then return the file’s path as part of the response, or return an error if no file is found.

We can run the application back end using the command given below:

node server.js
Setting Up the Front-End

Now that we have the application’s backend running, let’s begin the development of its front-end. For brevity’s sake, we will be building the entire application in just one component (i.e. the app component).

First, we need to register the drag and drop module from the @angular/cdk module in the app.module.ts file, as shown below:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from "@angular/common/http";
import { AppComponent } from './app.component';
import { DragDropModule } from "@angular/cdk/drag-drop" //<--- imported here
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    DragDropModule // <--- registered here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Next up, we set up the app.component.ts file. This is where most of our application logic resides.

Here, we will set up the upload event handler, the image upload handler, as well as the drop event handler of the CDK drag and drop lists.

import { Component } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { HttpEventType } from "@angular/common/http";
import {moveItemInArray, transferArrayItem, CdkDragDrop} from "@angular/cdk/drag-drop"

// Image model which also holds the upload progress and the file
class ImageFile {
file: File;
uploadProgress: string;
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {

images: ImageFile[] = []; //an array of valid images
imageUrls: string[] = []; //an array of uploaded image urls
favourites: string[] = []; //an array of favorite image urls
message: string = null; //a string to report the number of valid images

constructor(private http : HttpClient) { } //depedency injection

selectFiles = (event) => { //image upload handler
this.images = [];
let files : FileList = event.target.files;
for (let i = 0; i < files.length; i++) {
if (files.item(i).name.match(/.(jpg|jpeg|png|gif)$/)) { //image validity check
this.images.push({file: files.item(i), uploadProgress: "0"});
}
}
this.message = ${this.images.length} valid image(s) selected;
}
uploadImages(){ //image upload hander
this.images.map((image, index) => {
const formData = new FormData();
formData.append("image", image.file, image.file.name);
return this.http.post('http://localhost:5000/upload', formData, {
reportProgress: true,
observe: "events"
})
.subscribe(event => {
if (event.type === HttpEventType.UploadProgress ) {
image.uploadProgress = ${(event.loaded / event.total * 100)}%;
}
if (event.type === HttpEventType.Response) {
this.imageUrls.push(event.body.imageUrl);
}
});
});
}
drop(event: CdkDragDrop<string[]>) { //cdkdrop event handler
if (event.previousContainer !== event.container) {
// this handles moving an item between to list.
// here we can attach a server request to persist the changes
transferArrayItem(
event.previousContainer.data, // the list from which the item is picked
event.container.data, // the list to which the item is to be placed
event.previousIndex,
event.currentIndex
);
} else {
// this handle when a list is being rearranged
moveItemInArray(
event.container.data, // list to be rearranged
event.previousIndex,
event.currentIndex
);
}
}
}

At the top of this file, we imported the modules needed for this component, which include the HttpClient and the HttpEventType. In Angular, the former is used to handle the request, much like the request handling using Axios. HttpEventType is used to check the response event type (uploadProgess event is when the request data is still being uploaded, while the response event is when the response data is sent to the client). We also imported three things from the CDK module. The first one is the moveItemArray method which is used to move items from one position to another (i.e. it rearranges the list). The second one is the transferArrayItem method which is used to transfer an item from one list to another. Finally, we imported the CdkDragDrop which is used to hint the type of event the drop event handler expects.

Next, we declared a model to describe the file struct which includes the file upload progress as a percentage (usually this class would be in a separate file and folder as a model).

Next, we defined three methods that handle specific events in the component, and they are as follows:

  • The selectFiles method is used to handle the change event of the input field. It accepts the event that has a FileList.
  • Note: Although FileList has a length property, it is not an array; hence, it does not have high order methods, such as map, filter, etc.
  • The selectFiles method filters the list and returns only valid images for upload.
  • The uploadImages method sends the images to the server one after the other, using the FormData object provided by JavaScript. In the subscribe method (more like the then method of JavaScript promises) we accept the response event and act accordingly. For example, if the event is an upload progress event, we get the percentage of completion and return it to be rendered to the user. When the request has been completed, we push the returned image URL to the array of uploaded image URLs.
  • The drop method is used to respond to the drag and drop event. This method handles an item moving up and down a particular list, or between two connected lists. In this method, we can attach server calls (to save the changes) when we move an item from the regular list to the favorites list (although in this application, changes are not persisted).

Next, we edit the app.component.html file. Here, we render the list of images and the input for the image upload. The file is edited as shown below:

<div>
<br/>
<!-- form -->
<div class="col-sm-12">
<h1>Image Uploader</h1><hr/>
<button class="btn btn-primary" (click)="imageInput.click()">Select Images</button>
<input class="form-control d-none" type="file" (change)="selectFiles($event)" multiple #imageInput/>
<button class="btn btn-success float-right" (click)="uploadImages()">Upload</button>
<hr>
<p class="text-info" *ngIf="message"><strong>{{message}}</strong></p>
<hr>

&lt;!-- upload progress --&gt;
&lt;div class="col-12" *ngFor="let image of images"&gt;
  &lt;div class="progress" style="margin-bottom: 10px" *ngIf="image.uploadProgress"&gt;
    &lt;div class="progress-bar progress-bar-striped progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" naria-valuemax="100" [ngStyle]="{'width': image.uploadProgress }"&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

</div>

<!-- drag and drop list-->
<hr/>
<div class="row">
<div cdkDropList [cdkDropListData]="imageUrls"
[cdkDropListConnectedTo]="secondList" #firstList="cdkDropList"
(cdkDropListDropped)="drop($event)" class="col-2 offset-2 card" style="min-height: 100px">
<h4>Images</h4>
<div *ngFor="let imageUrl of imageUrls" class="pop" cdkDrag>
<img src="{{imageUrl}}" class="img-thumbnail" alt="not available"/><br/>
</div>
</div>
<div cdkDropList [cdkDropListData]="favourites"
[cdkDropListConnectedTo]="firstList" #secondList="cdkDropList"
(cdkDropListDropped)="drop($event)" class="col-2 offset-2 card" style="min-height: 100px">
<h4>Favourites Images</h4>
<div *ngFor="let imageUrl of favourites" class="pop" cdkDrag>
<img src="{{imageUrl}}" class="img-thumbnail" alt="not available"/><br/>
</div>
</div>
</div>
</div>

Here the file input is hidden from the user and given an #imageInput handle which is used by the button shown to the user to trigger the click event of the file input. Also, the selectFiles method previously defined is attached to the on change event of the file input.

Next, the upload progress of the files is displayed. This is achieved using the upload progress attached to each ImageFile object in the images array.

Finally, we render the uploaded images using their URLs in the imageUrls and favorites array. For the first array, we attach the cdkDropList attribute to indicate that this is a list with the drag and drop functionalities handled by the CDK module. We then pass the array of image URLs to the cdkDropListData property for the CDK module to handle the changes using this array as its data target. We then connect it to the other list (in this case, the favorites list) using the cdkDropListConnectedTo property. Next, we attach the drop event handler using the cdkDropListDropped Angular created custom event. Finally, on each item, we attach the cdkDrag to make them draggable and droppable. We do the same for the favorites list and name it the #secondList. Now we should be able to drag items between lists, as well as up and down the same list.

Run the Application

Run the application from the server tab of the Angular IDE.

Now we are done with the development of this application. Congratulations!

Conclusion

In this article, we created a Node.js backend using Express, which accepts file input, saves it, and returns the file path for rendering. We built a front-end with the Angular framework, taking advantage of the Angular CDK’s drag and drop module.

As always, this is a simple application that can be improved by using data persistence, and breaking up the application into smaller, more manageable components. Moving the application’s data handling into a service would be a good step too.

*Originally published by George Anderson at https://dzone.com/articles/angular-7-uploads-backed-by-nodejs

Follow great articles on Twitter

Learn More

☞ Angular 7 (formerly Angular 2) - The Complete Guide

☞ Learn and Understand AngularJS

☞ Angular Crash Course for Busy Developers

☞ The Complete Angular Course: Beginner to Advanced

☞ Angular (Angular 2+) & NodeJS - The MEAN Stack Guide

☞ Become a JavaScript developer - Learn (React, Node,Angular)

☞ Angular (Full App) with Angular Material, Angularfire & NgRx

Angular 8 Node & Express JS File Upload

Angular 8 Node & Express JS File Upload

In this Angular 8 and Node.js tutorial, we are going to look at how to upload files on the Node server. To create Angular image upload component, we will be using Angular 8 front-end framework along with ng2-file-upload NPM package; It’s an easy to use Angular directives for uploading the files.

In this Angular 8 and Node.js tutorial, we are going to look at how to upload files on the Node server. To create Angular image upload component, we will be using Angular 8 front-end framework along with ng2-file-upload NPM package; It’s an easy to use Angular directives for uploading the files.

We are also going to take the help of Node.js to create the backend server for Image or File uploading demo. Initially, we’ll set up an Angular 8 web app from scratch using Angular CLI. You must have Node.js and Angular CLI installed in your system.

We’ll create the local server using Node.js and multer middleware. Multer is a node.js middleware for handling multipart/form-data, which is primarily used for uploading files. Once we are done setting up front-end and backend for our File uploading demo then, we’ll understand step by step how to configure file uploading in Angular 8 app using Node server.

Prerequisite

In order to show you Angular 8 File upload demo, you must have Node.js and Angular CLI installed in your system. If not then check out this tutorial: Set up Node JS

Run following command to install Angular CLI:

npm install @angular/cli -g

Install Angular 8 App

Run command to install Angular 8 project:

ng new angular-node-file-upload

# ? Would you like to add Angular routing? No
# ? Which stylesheet format would you like to use? CSS
cd angular-node-file-upload

Show Alert Messages When File Uploaded

We are going to install and configure ngx-toastr an NPM package which helps in showing the alert message when the file is uploaded on the node server.

npm install ngx-toastr --save

The ngx-toastr NPM module requires @angular/animations dependency:

npm install @angular/animations --save

Then, add the ngx-toastr CSS in angular.json file:

"styles": [
    "src/styles.css",
    "node_modules/ngx-toastr/toastr.css"
]

Import BrowserAnimationsModule and ToastrModule in app.module.ts file:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';
 
@NgModule({
  imports: [
    CommonModule,
    BrowserAnimationsModule, // required animations module
    ToastrModule.forRoot() // ToastrModule added
  ]
})

export class AppModule { }

Install & Configure ng-file-upload Directive

In this step, we’ll Install and configure ng-file-upload library in Angular 8 app. Run command to install ng-file-upload library.

npm install ng2-file-upload

Once the ng2-file-upload directive is installed, then import the FileSelectDirective and FormsModule in app.module.ts. We need FormsModule service so that we can create the file uploading component in Angular.

import { FileSelectDirective } from 'ng2-file-upload';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    FileSelectDirective
  ],
  imports: [
    FormsModule
  ]
})

export class AppModule { }

Setting Up Node Backend for File Upload Demo

To upload the file on the server, we need to set up a separate backend. In this tutorial, we will be using Node & Express js to create server locally along with multer, express js, body-parser, and dotenv libraries.

Run command to create backend folder in Angular app’s root directory:

mkdir backend && cd backend

In the next step, create a specific package.json file.

npm init

Run command to install required dependencies:

npm install express cors body-parser multer dotenv --save

In order to get rid from starting the server again and again, install nodemon NPM package. Use –-save-dev along with the npm command to register in the devDependencies array. It will make it available for development purpose only.

npm install nodemon --save-dev

Have a look at final pacakge.json file for file upload demo backend:

{
  "name": "angular-node-file-upload",
  "version": "1.0.0",
  "description": "Angualr 8 file upload demo app",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "author": "Digamber Rawat",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "dotenv": "^8.0.0",
    "express": "^4.17.1",
    "multer": "^1.4.1"
  },
  "devDependencies": {
    "nodemon": "^1.19.1"
  }
}

Create a file by the name of server.js inside backend folder:

Configure Server.js

To configure our backend we need to create a server.js file. In this file we’ll keep our backend server’s settings.

touch server.js

Now, paste the following code in backend > server.js file:

const express = require('express'),
  path = require('path'),
  cors = require('cors'),
  multer = require('multer'),
  bodyParser = require('body-parser');

// File upload settings  
const PATH = './uploads';

let storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, PATH);
  },
  filename: (req, file, cb) => {
    cb(null, file.fieldname + '-' + Date.now())
  }
});

let upload = multer({
  storage: storage
});

// Express settings
const app = express();
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: false
}));

app.get('/api', function (req, res) {
  res.end('File catcher');
});

// POST File
app.post('/api/upload', upload.single('image'), function (req, res) {
  if (!req.file) {
    console.log("No file is available!");
    return res.send({
      success: false
    });

  } else {
    console.log('File is available!');
    return res.send({
      success: true
    })
  }
});

// Create PORT
const PORT = process.env.PORT || 8080;
const server = app.listen(PORT, () => {
  console.log('Connected to port ' + PORT)
})

// Find 404 and hand over to error handler
app.use((req, res, next) => {
  next(createError(404));
});

// error handler
app.use(function (err, req, res, next) {
  console.error(err.message);
  if (!err.statusCode) err.statusCode = 500;
  res.status(err.statusCode).send(err.message);
});

Now, while staying in the backend folder run the below command to start the backend server:

nodemon server.js

If everything goes fine then you’ll get the following output:

[nodemon] 1.19.1
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node server.js`
Connected to port 8080

Create Angular 8 File Upload Component

In this last step, we are going to create a file upload component in Angular 8 app using Express js API.

Get into the app.component.ts file and include the following code:

import { Component, OnInit } from '@angular/core';
import { FileUploader } from 'ng2-file-upload/ng2-file-upload';
import { ToastrService } from 'ngx-toastr';

const URL = 'http://localhost:8080/api/upload';

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

export class AppComponent implements OnInit {
  public uploader: FileUploader = new FileUploader({
    url: URL,
    itemAlias: 'image'
  });

  constructor(private toastr: ToastrService) { }

  ngOnInit() {
    this.uploader.onAfterAddingFile = (file) => {
      file.withCredentials = false;
    };
    this.uploader.onCompleteItem = (item: any, status: any) => {
      console.log('Uploaded File Details:', item);
      this.toastr.success('File successfully uploaded!');
    };
  }

}

Go to app.component.html file and add the given below code:

<div class="wrapper">
  <h2>Angular Image Upload Demo</h2>

  <div class="file-upload">
    <input type="file" name="image" ng2FileSelect [uploader]="uploader" accept="image/x-png,image/gif,image/jpeg" />
    <button type="button" (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
      Upload
    </button>
  </div>

</div>

Now, It’s time to start the Angular 8 app to check out the File upload demo in the browser. Run the following command:

ng serve --open

Make sure your NODE server must be running to manage the backend.

When you upload the image from front-end you’ll see your image files are saving inside the backend > uploads folder.

Conclusion

In this Angular 8 tutorial, we barely scratched the surface related to file uploading in a Node application. There are various other methods available on the internet through which you can achieve file uploading task quickly. However, this tutorial is suitable for beginners developers. I hope this tutorial will surely help and you if you liked this tutorial, please consider sharing it with others.

How to Implement Server Side Pagination with Angular 8 and Node.js

How to Implement Server Side Pagination with Angular 8 and Node.js

A simple example of how to implement server-side pagination in Angular 8 with a Node.js backend API.

This is a simple example of how to implement server-side pagination in Angular 8 with a Node.js backend API.

The example contains a hard coded array of 150 objects split into 30 pages (5 items per page) to demonstrate how the pagination logic works. Styling of the example is done with Bootstap 4.

The tutorial code is available on GitHub at https://github.com/cornflourblue/angular-8-node-server-side-pagination.

Here it is in action (may take a few seconds for the container to startup):

Running the Angular + Node Pagination Example Locally
  1. Install NodeJS and NPM from https://nodejs.org/en/download/.
  2. Download or clone the tutorial project source code from https://github.com/cornflourblue/angular-8-node-server-side-pagination.
  3. Install required npm packages of the backend Node API by running the npm install command in the /server folder.
  4. Start the backend Node API by running npm start in the /server folder, this will start the API on the URL http://localhost:4000.
  5. Install required npm packages of the frontend Angular app by running the npm install command in the /client folder.
  6. Start the Angular frontend app by running npm start in the /client folder, this will build the app with webpack and automatically launch it in a browser on the URL http://localhost:8080.
Server-Side (Node.js) Pagination Logic

Below is the code for the paged items route (/api/items) in the node server file (/server/server.js) in the example, it creates a hardcoded list of 150 items to be paged, in a real application you would replace this with real data (e.g. from a database). The route accepts an optional page parameter in the url query string, if the parameter isn't set it defaults to the first page.

The paginate() function is from the jw-paginate package and accepts the following parameters:

  • totalItems (required) - the total number of items to be paged
  • currentPage (optional) - the current active page, defaults to the first page
  • pageSize (optional) - the number of items per page, defaults to 10
  • maxPages (optional) - the maximum number of page navigation links to display, defaults to 10

The output of the paginate function is a pager object containing all the information needed to get the current pageOfItems out of the items array, and to display the pagination controls in the Angular frontend, including:

  • startIndex - the index of the first item of the current page (e.g. 0)
  • endIndex - the index of the last item of the current page (e.g. 9)
  • pages - the array of page numbers to display (e.g. [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ])
  • currentPage - the current active page (e.g. 1)
  • totalPages - the total number of pages (e.g. 30)

I've set the pageSize to 5 in the CodeSandbox example above so the pagination links aren't hidden below the terminal console when the container starts up. In the code on GitHub I didn't set the page size so the default 10 items are displayed per page in that version.

The current pageOfItems is extracted from the items array using the startIndex and endIndex from the pager object. The route then returns the pager object and current page of items in a JSON response.

// paged items route
app.get('/api/items', (req, res, next) => {
    // example array of 150 items to be paged
    const items = [...Array(150).keys()].map(i => ({ id: (i + 1), name: 'Item ' + (i + 1) }));

    // get page from query params or default to first page
    const page = parseInt(req.query.page) || 1;

    // get pager object for specified page
    const pageSize = 5;
    const pager = paginate(items.length, page, pageSize);

    // get page of items from items array
    const pageOfItems = items.slice(pager.startIndex, pager.endIndex + 1);

    // return pager object and current page of items
    return res.json({ pager, pageOfItems });
});

Client-Side (Angular 8) Pagination Components

Since the pagination logic is handled on the server, the only thing the Angular client needs to do is fetch the pager information and current page of items from the backend, and display them to the user.

Angular Home Component

Below is the Angular home component (/client/src/app/home/home.component.ts) from the example. The loadPage() method fetches the pager object and pageOfItems for the specified page from the backend API with an HTTP request, and the ngOnInit() gets the page parameter in the route query params or defaults to the first page if the query param is empty.

By subscribing to the route.queryParams observable, the home component is notified whenever the page changes so it can load the new page.

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ActivatedRoute } from '@angular/router';

@Component({ templateUrl: 'home.component.html' })
export class HomeComponent implements OnInit {
    pager = {};
    pageOfItems = [];

    constructor(
        private http: HttpClient,
        private route: ActivatedRoute
    ) { }

    ngOnInit() {
        // load page based on 'page' query param or default to 1
        this.route.queryParams.subscribe(x => this.loadPage(x.page || 1));
    }

    private loadPage(page) {
        // get page of items from api
        this.http.get(`/api/items?page=${page}`).subscribe(x => {
            this.pager = x.pager;
            this.pageOfItems = x.pageOfItems;
        });
    }
}

Angular Home Component Template

The home component template (/client/src/app/home/home.component.html) renders the current page of items as a list of divs with the *ngFor directive, and renders the pagination controls using the data from the pager object. Each pagination link sets the page query parameter in the url with the routerLink directive and [queryParams] property.

The CSS classes used are all part of Bootstrap 4.3, for more info see https://getbootstrap.com/docs/4.3/getting-started/introduction/.


    ### Angular 8 + Node - Server Side Pagination Example

    
        {{item.name}}

    
    
        
            
                First
            
            
                Previous
            
            
                {{page}}
            
            
                Next
            
            
                Last
            
        
    


I hope this tutorial will surely help and you if you liked this tutorial, please consider sharing it with others.

Thanks For Visiting, Keep Visiting.

Difference between Node.js and React.js and Angular.js

AngularJS turned the whole definition of web development through its existence, what was lacking in previous methods of development was inappropriate structure. It merges use of JavaScript with MVC and HTML with DOM. ReactJS is a JavaScript library and has a view, but lacks model &amp; controller components. React introduced the concept of virtual DOM which is regarded as one of the greatest advantages of React in comparison of AngularJS. Node.js is a JavaScript-based platform used for developing real-time network applications like a chat software.

AngularJS turned the whole definition of web development through its existence, what was lacking in previous methods of development was inappropriate structure. It merges use of JavaScript with MVC and HTML with DOM. ReactJS is a JavaScript library and has a view, but lacks model & controller components. React introduced the concept of virtual DOM which is regarded as one of the greatest advantages of React in comparison of AngularJS. Node.js is a JavaScript-based platform used for developing real-time network applications like a chat software.