Angular 6 HttpClient – PostgreSQL – Node.js/Express Sequelize CRUD APIs – Post/Get/Put/Delete

Sequelize is a promise-based ORM for Node.js v4 and later. In the tutorial, we will show how to GET/POST/PUT/DELETE requests from Angular 6 Client to PostgreSQL with NodeJs/Express RestAPIs using Sequelize ORM.

Related posts:
Node.js/Express RestAPIs CRUD – Sequelize ORM – PostgreSQL
Node.js/Express RestAPIs – Angular 6 HttpClient – Get/Post/Put/Delete requests + Bootstrap 4


  • Angular 6
  • RxJS 6
  • Bootstrap 4
  • Visual Studio Code – version 1.24.0
  • Nodejs – v8.11.3
  • Sequelize
  • PostgreSQL



We create 2 projects:

– Angular Client Project:

angular-6-http-client-nodejs-express-sequelize-crud-postgresql + angular-project-structure

– Node.js RestAPIs project:

angular-6-http-client-nodejs-express-sequelize-crud-postgresql + nodejs-project-structure


Start Node.js server -> Logs:

-> PostgreSQL records:

angular-6-http-client-nodejs-express-sequelize-crud-postgresql + initial-data-postgresql-records

– Angular client retrieve all customers from Node.js RestAPIs:

angular-6-http-client-nodejs-express-sequelize-crud-postgresql + retrieve-all

– Angular client update a customer -> Change the firstname of first customer: ‘Joe’ to ‘Robert’.

angular-6-http-client-nodejs-express-sequelize-crud-postgresql + update-form

-> result:

angular-6-http-client-nodejs-express-sequelize-crud-postgresql + update-result

– Delete ‘Peter’ customer:

angular-6-http-client-nodejs-express-sequelize-crud-postgresql + delete-result

– Add a new customer:

angular-6-http-client-nodejs-express-sequelize-crud-postgresql + add-new

-> result:

angular-6-http-client-nodejs-express-sequelize-crud-postgresql + add-result

– Check final customer’s list:

angular-6-http-client-nodejs-express-sequelize-crud-postgresql + check-final-list

-> Sequelize Logs:

-> PostgreSQL’s records:

angular-6-http-client-nodejs-express-sequelize-crud-postgresql + fina-postgresql-records

Node.js/Express RestAPIs

Node.js exposes 5 RestAPIs as below:

  •‘/api/customers’, customers.create);
  • router.get(‘/api/customers’, customers.findAll);
  • router.get(‘/api/customers/:id’, customers.findOne);
  • router.put(‘/api/customers’, customers.update);
  • router.delete(‘/api/customers/:id’, customers.delete);

– Configure cross-origin for Angular-Client which running at port: 4200.

Angular 6 HttpClient

Use Angular HttpClient APIs to do Get/Post/Put/Delete requests to Node.js RestAPIs:


Node.js Express RestAPIs
Setting up NodeJs/Express project

Following the guide to create a NodeJS/Express project.

Install Express, Sequelize, PostgreSQL, and Cors:

– Express is one of the most popular web frameworks for NodeJs which is built on top of Node.js http module, and adds support for routing, middleware, view system etc.
– Cors is a mechanism that uses HTTP headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin.
– Sequelize is a promise-based ORM for Node.js v4 and up. It supports the dialects PostgreSQL, MySQL …

-> package.json file:

Setting up Sequelize PostgreSQL connection

– Create ‘./app/config/env.js’ file:

– Setup Sequelize-PostgreSQL connection in ‘./app/config/db.config.js’ file:

Create Sequelize model

Create file ./app/model/customer.model.js file:

Express RestAPIs

Route ->
Define Customer’s routes in ‘./app/controller/customer.route.js’ file:

Implement Customer’s controller in ‘./app/controller/customer.controller.js’ file:


server.js ->

Angular 6 Client
Data Model

customer.ts ->

Configure AppModule

In the developed application, we use:

  • Angular Forms -> for building form
  • HttpClient -> for http Get/Post/Put/Delete requests
  • AppRouting -> for app routing

-> Modify AppModule app.module.ts:

HttpClient DataService

Implement CustomerService customer.service.ts with HttpClient for Get/Post/Put/Delete:

Angular Router

Implement App-Routing module app-routing.module.ts:

Router Outlet & Router Links

-> Questions:

  • How to show Componenets with Angular Routers? -> Solution: using Router Outlet
  • How to handle the routing that comes from user’s actions? (like clicks on anchor tag) -> Solution: using Router Link

-> We can achieve above functions by using Angular’s router-outlet and routerLink.

Modify the template file app.component.html of AppComponenet component as below:

Customer Component

Customer Component ->

angular-6-http-client-nodejs-express-sequelize-crud-postgresql + retrieve-all

– Implement CustomerComponent class customer.component.ts:

– Implement the template customer.component.html :

Customer Detail Component

Customer Detail ->

angular-6-http-client-nodejs-express-sequelize-crud-postgresql + update-form

-> results:

angular-6-http-client-nodejs-express-sequelize-crud-postgresql + update-result

angular-6-http-client-nodejs-express-sequelize-crud-postgresql + delete-result

– Implement CustomerDetails class customer-details.component.ts:

– Implement CustomerDetailsComponent template customer-details.component.html :

We can change the value of ng-valid & ng-invalid for more visual feedback,
-> Create ./assets/forms.css file:

Add ./assets/forms.css file to index.html :

Add-Customer Component

AddCustomer Component ->

angular-6-http-client-nodejs-express-sequelize-crud-postgresql + add-new

-> result:

angular-6-http-client-nodejs-express-sequelize-crud-postgresql + add-result

– Implement AddCustomerComponent class add-customer.component.ts:

– Implement the template add-customer.component.html:



By JavaSampleApproach | July 11, 2018.

Related Posts

Got Something To Say:

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