{"id":15372,"date":"2023-06-08T01:49:42","date_gmt":"2023-06-08T01:49:42","guid":{"rendered":"https:\/\/www.bezkoder.com\/?p=15372"},"modified":"2023-10-16T03:06:18","modified_gmt":"2023-10-16T03:06:18","slug":"angular-16-node-js-express-postgresql","status":"publish","type":"post","link":"https:\/\/www.bezkoder.com\/angular-16-node-js-express-postgresql\/","title":{"rendered":"Angular 16 + Node.js Express + PostgreSQL example: CRUD App"},"content":{"rendered":"<p>In this tutorial, I will show you how to build a full-stack (Angular 16 + Node.js + Express + PostgreSQL) example with a CRUD Application. The back-end server uses Node.js + Express for REST APIs, front-end side is an Angular App with HttpClient and Router.<\/p>\n<p>Related Posts:<br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/server-side-pagination-node-js-angular\/\">Server side Pagination with Node.js and Angular<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-16-node-express-file-upload\/\">File Upload using Angular and Node.js<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/node-js-angular-16-jwt-auth\/\">Angular 16 + Node.js Express: JWT Authentication &#038; Authorization example<\/a><\/p>\n<p>Run both projects in one place:<br \/>\n<a href=\"https:\/\/bezkoder.com\/integrate-angular-12-node-js\/\">How to Integrate Angular with Node.js Restful Services<\/a><\/p>\n<p>Serverless with Firebase:<br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-16-firebase-crud\/\">Angular 16 Firebase Database CRUD example<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-16-firestore-crud\/\">Angular 16 Firestore CRUD example<\/a><\/p>\n<p><!--more--><br \/>\n<div id=\"toc_container\" class=\"no_bullets\"><p class=\"toc_title\">Contents<\/p><ul class=\"toc_list\"><li><a href=\"#Angular_16_Nodejs_Express_PostgreSQL_example\">Angular 16 + Node.js + Express + PostgreSQL example<\/a><\/li><li><a href=\"#Angular_16_and_Node_PostgreSQL_Full-stack_Architecture\">Angular 16 and Node PostgreSQL Full-stack Architecture<\/a><\/li><li><a href=\"#Video\">Video<\/a><\/li><li><a href=\"#Nodejs_Express_Back-end\">Node.js Express Back-end<\/a><ul><li><a href=\"#Overview\">Overview<\/a><\/li><li><a href=\"#Project_Structure\">Project Structure<\/a><\/li><li><a href=\"#Create_Nodejs_App\">Create Node.js App<\/a><\/li><li><a href=\"#Setup_Express_web_server\">Setup Express web server<\/a><\/li><li><a href=\"#Configure_PostgreSQL_database_038_Sequelize\">Configure PostgreSQL database &#038; Sequelize<\/a><\/li><li><a href=\"#Initialize_Sequelize\">Initialize Sequelize<\/a><\/li><li><a href=\"#Define_the_Sequelize_Model\">Define the Sequelize Model<\/a><\/li><li><a href=\"#Create_the_Controller\">Create the Controller<\/a><\/li><li><a href=\"#Run_the_Nodejs_Express_Server\">Run the Node.js Express Server<\/a><\/li><\/ul><\/li><li><a href=\"#Angular_16_Front-end\">Angular 16 Front-end<\/a><ul><li><a href=\"#Overview-2\">Overview<\/a><\/li><li><a href=\"#Technology\">Technology<\/a><\/li><li><a href=\"#Project_Structure-2\">Project Structure<\/a><\/li><li><a href=\"#Setup_Angular_16_Project\">Setup Angular 16 Project<\/a><\/li><li><a href=\"#Set_up_App_Module\">Set up App Module<\/a><\/li><li><a href=\"#Define_Routes_for_Angular_AppRoutingModule\">Define Routes for Angular AppRoutingModule<\/a><\/li><li><a href=\"#Define_Model_Class\">Define Model Class<\/a><\/li><li><a href=\"#Create_Data_Service\">Create Data Service<\/a><\/li><li><a href=\"#Create_Angular_16_Components\">Create Angular 16 Components<\/a><\/li><li><a href=\"#Run_the_Angular_16_App\">Run the Angular 16 App<\/a><\/li><\/ul><\/li><li><a href=\"#Further_Reading\">Further Reading<\/a><\/li><li><a href=\"#Source_Code\">Source Code<\/a><\/li><li><a href=\"#Conclusion\">Conclusion<\/a><\/li><\/ul><\/div>\n<\/p>\n<h2><span id=\"Angular_16_Nodejs_Express_PostgreSQL_example\">Angular 16 + Node.js + Express + PostgreSQL example<\/span><\/h2>\n<p>We will build a full-stack Angular 16 and Node PostgreSQL CRUD Tutorial Application in that:<\/p>\n<ul>\n<li>Tutorial has id, title, description, published status.<\/li>\n<li>User can create, retrieve, update, delete Tutorials.<\/li>\n<li>There is a search box for finding Tutorials by title.<\/li>\n<\/ul>\n<p>Here are screenshots of the example.<\/p>\n<p>&#8211; Create a Tutorial:<\/p>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-crud-tutorial-create.png\" alt=\"angular-16-node-express-postgresql-example-crud-tutorial-create\" width=\"560\" height=\"340\" class=\"alignnone size-full wp-image-15376 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-crud-tutorial-create.png\" alt=\"angular-16-node-express-postgresql-example-crud-tutorial-create\" width=\"560\" height=\"340\" class=\"alignnone size-full wp-image-15376 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-crud-tutorial-create.png 560w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-crud-tutorial-create-300x182.png 300w\" sizes=\"(max-width: 560px) 100vw, 560px\" \/><\/noscript><\/p>\n<p>&#8211; Retrieve all Tutorials:<\/p>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-crud-tutorial-retrieve.png\" alt=\"angular-16-node-express-postgresql-example-crud-tutorial-retrieve\" width=\"680\" height=\"510\" class=\"alignnone size-full wp-image-15377 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-crud-tutorial-retrieve.png\" alt=\"angular-16-node-express-postgresql-example-crud-tutorial-retrieve\" width=\"680\" height=\"510\" class=\"alignnone size-full wp-image-15377 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-crud-tutorial-retrieve.png 680w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-crud-tutorial-retrieve-300x225.png 300w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/noscript><\/p>\n<p>&#8211; Click on <strong>Edit<\/strong> button to update a Tutorial:<\/p>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-crud-tutorial-retrieve-one.png\" alt=\"angular-16-node-express-postgresql-example-crud-tutorial-retrieve-one\" width=\"570\" height=\"410\" class=\"alignnone size-full wp-image-15378 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-crud-tutorial-retrieve-one.png\" alt=\"angular-16-node-express-postgresql-example-crud-tutorial-retrieve-one\" width=\"570\" height=\"410\" class=\"alignnone size-full wp-image-15378 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-crud-tutorial-retrieve-one.png 570w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-crud-tutorial-retrieve-one-300x216.png 300w\" sizes=\"(max-width: 570px) 100vw, 570px\" \/><\/noscript><\/p>\n<p>On this Page, you can:<\/p>\n<ul>\n<li>change status to <strong>Published<\/strong> using <strong>Publish<\/strong> button<\/li>\n<li>delete the Tutorial using <strong>Delete<\/strong> button<\/li>\n<li>update the Tutorial details with <strong>Update<\/strong> button<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-crud-tutorial-update.png\" alt=\"angular-16-node-express-postgresql-example-crud-tutorial-update\" width=\"450\" height=\"330\" class=\"alignnone size-full wp-image-15379 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-crud-tutorial-update.png\" alt=\"angular-16-node-express-postgresql-example-crud-tutorial-update\" width=\"450\" height=\"330\" class=\"alignnone size-full wp-image-15379 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-crud-tutorial-update.png 450w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-crud-tutorial-update-300x220.png 300w\" sizes=\"(max-width: 450px) 100vw, 450px\" \/><\/noscript><\/p>\n<p>If you want to implement Form Validation, please visit:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.bezkoder.com\/angular-16-form-validation\/\">Angular 16 Reactive Form Validation example<\/a><\/li>\n<li><a href=\"https:\/\/www.bezkoder.com\/angular-16-template-driven-form-validation\/\">Angular 16 Template Driven Form Validation example<\/a><\/li>\n<\/ul>\n<p>&#8211; Search Tutorials by title:<\/p>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-crud-tutorial-search.png\" alt=\"angular-16-node-express-postgresql-example-crud-tutorial-search\" width=\"700\" height=\"310\" class=\"alignnone size-full wp-image-15380 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-crud-tutorial-search.png\" alt=\"angular-16-node-express-postgresql-example-crud-tutorial-search\" width=\"700\" height=\"310\" class=\"alignnone size-full wp-image-15380 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-crud-tutorial-search.png 700w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-crud-tutorial-search-300x133.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/noscript><\/p>\n<p>&#8211; PostgreSQL database table will look like this:<\/p>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-crud-database-table.png\" alt=\"angular-16-node-express-postgresql-example-crud-database-table\" width=\"860\" height=\"100\" class=\"alignnone size-full wp-image-15381 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-crud-database-table.png\" alt=\"angular-16-node-express-postgresql-example-crud-database-table\" width=\"860\" height=\"100\" class=\"alignnone size-full wp-image-15381 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-crud-database-table.png 860w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-crud-database-table-300x35.png 300w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-crud-database-table-768x89.png 768w\" sizes=\"(max-width: 860px) 100vw, 860px\" \/><\/noscript><\/p>\n<h2><span id=\"Angular_16_and_Node_PostgreSQL_Full-stack_Architecture\">Angular 16 and Node PostgreSQL Full-stack Architecture<\/span><\/h2>\n<p>We&#8217;re gonna build the application with following architecture:<\/p>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-crud-architecture.png\" alt=\"angular-16-node-express-postgresql-example-crud-architecture\" width=\"700\" height=\"248\" class=\"alignnone size-full wp-image-15382 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-crud-architecture.png\" alt=\"angular-16-node-express-postgresql-example-crud-architecture\" width=\"700\" height=\"248\" class=\"alignnone size-full wp-image-15382 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-crud-architecture.png 700w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-crud-architecture-300x106.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/noscript><\/p>\n<p>\u2013 Node.js Express exports REST APIs &#038; interacts with PostgreSQL Database using Sequelize ORM.<br \/>\n\u2013 Angular 16 Client sends HTTP Requests and retrieves HTTP Responses using <em>HTTPClient<\/em>, consume data on the components. Angular Router is used for navigating to pages.<\/p>\n<h2><span id=\"Video\">Video<\/span><\/h2>\n<p>This is our Angular + Node.js PostgreSQL application demo and brief instruction, running with Express Rest Apis:<\/p>\n<p><iframe class=\"lazyload\" width=\"560\" height=\"315\" data-src=\"https:\/\/www.youtube.com\/embed\/YXfixWQApDA?rel=0\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p>In the video, we use Angular 10, but the UI and logic are the same as this Angular version 16.<\/p>\n<h2><span id=\"Nodejs_Express_Back-end\">Node.js Express Back-end<\/span><\/h2>\n<h3><span id=\"Overview\">Overview<\/span><\/h3>\n<p>These are APIs that Node.js Express App will export:<\/p>\n<div class=\"table-responsive\">\n<table  class=\"table table-hover  table table-hover table table-hover\"  width=\"100%\">\n<thead>\n<tr>\n<th>Methods<\/th>\n<th>Urls<\/th>\n<th>Actions<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>GET<\/td>\n<td>api\/tutorials<\/td>\n<td>get all Tutorials<\/td>\n<\/tr>\n<tr>\n<td>GET<\/td>\n<td>api\/tutorials\/:id<\/td>\n<td>get Tutorial by <code>id<\/code><\/td>\n<\/tr>\n<tr>\n<td>POST<\/td>\n<td>api\/tutorials<\/td>\n<td>add new Tutorial<\/td>\n<\/tr>\n<tr>\n<td>PUT<\/td>\n<td>api\/tutorials\/:id<\/td>\n<td>update Tutorial by <code>id<\/code><\/td>\n<\/tr>\n<tr>\n<td>DELETE<\/td>\n<td>api\/tutorials\/:id<\/td>\n<td>remove Tutorial by <code>id<\/code><\/td>\n<\/tr>\n<tr>\n<td>DELETE<\/td>\n<td>api\/tutorials<\/td>\n<td>remove all Tutorials<\/td>\n<\/tr>\n<tr>\n<td>GET<\/td>\n<td>api\/tutorials?title=[kw]<\/td>\n<td>find all Tutorials which title contains <code>'kw'<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<h3><span id=\"Project_Structure\">Project Structure<\/span><\/h3>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-crud-server-project.png\" alt=\"angular-16-node-express-postgresql-example-crud-server-project\" width=\"250\" height=\"330\" class=\"alignnone size-full wp-image-15383 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-crud-server-project.png\" alt=\"angular-16-node-express-postgresql-example-crud-server-project\" width=\"250\" height=\"330\" class=\"alignnone size-full wp-image-15383 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-crud-server-project.png 250w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-crud-server-project-227x300.png 227w\" sizes=\"(max-width: 250px) 100vw, 250px\" \/><\/noscript><\/p>\n<p>&#8211; <em>db.config.js<\/em> exports configuring parameters for PostgreSQL connection &#038; Sequelize.<br \/>\n&#8211; <strong>Express<\/strong> web server in <em>server.js<\/em> where we configure CORS, initialize &#038; run Express REST APIs.<br \/>\n&#8211; Next, we add configuration for PostgreSQL database in <strong>models<\/strong>\/<em>index.js<\/em>, create <strong>Sequelize<\/strong> data model in <strong>models<\/strong>\/<em>tutorial.model.js<\/em>.<br \/>\n&#8211; Tutorial controller in <strong>controllers<\/strong>.<br \/>\n&#8211; Routes for handling all CRUD operations (including custom finder) in <em>tutorial.routes.js<\/em>.<\/p>\n<h3><span id=\"Create_Nodejs_App\">Create Node.js App<\/span><\/h3>\n<p>First, we create a folder:<\/p>\n<pre><code>$ mkdir nodejs-express-sequelize-postgresql\r\n$ cd nodejs-express-sequelize-postgresql\r\n<\/code><\/pre>\n<p>Next, we initialize the Node.js App with a <em>package.json<\/em> file:<\/p>\n<pre><code>npm init\r\n\r\nname: (nodejs-express-sequelize-postgresql) \r\nversion: (1.0.0) \r\ndescription: Node.js Rest Apis with Express, Sequelize & PostgreSQL.\r\nentry point: (index.js) server.js\r\ntest command: \r\ngit repository: \r\nkeywords: nodejs, express, sequelize, postgresql, rest, api\r\nauthor: bezkoder\r\nlicense: (ISC)\r\n\r\nIs this ok? (yes) yes\r\n<\/code><\/pre>\n<p>We need to install necessary modules: <code>express<\/code>, <code>sequelize<\/code>, <code>pg<\/code>, <code>pg-hstore<\/code>.<br \/>\nRun the command:<\/p>\n<pre><code>npm install express sequelize pg pg-hstore cors --save\r\n<\/code><\/pre>\n<p>*<code>pg<\/code> for PostgreSQL and <code>pg-hstore<\/code> for converting data into the PostgreSQL hstore format.<\/p>\n<h3><span id=\"Setup_Express_web_server\">Setup Express web server<\/span><\/h3>\n<p>In the root folder, let&#8217;s create a new <em>server.js<\/em> file:<\/p>\n<pre><code class=\"language-js\">const express = require(\"express\");\r\nconst cors = require(\"cors\");\r\n\r\nconst app = express();\r\n\r\nvar corsOptions = {\r\n  origin: \"http:\/\/localhost:8081\"\r\n};\r\n\r\napp.use(cors(corsOptions));\r\n\r\n\/\/ parse requests of content-type - application\/json\r\napp.use(express.json());\r\n\r\n\/\/ parse requests of content-type - application\/x-www-form-urlencoded\r\napp.use(express.urlencoded({ extended: true }));\r\n\r\n\/\/ simple route\r\napp.get(\"\/\", (req, res) => {\r\n  res.json({ message: \"Welcome to bezkoder application.\" });\r\n});\r\n\r\n\/\/ set port, listen for requests\r\nconst PORT = process.env.PORT || 8080;\r\napp.listen(PORT, () => {\r\n  console.log(`Server is running on port ${PORT}.`);\r\n});\r\n<\/code><\/pre>\n<p>What we do are:<br \/>\n&#8211; import <code>express<\/code> and <code>cors<\/code> modules:<\/p>\n<ul>\n<li>Express is for building the Rest apis<\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/cors\">cors<\/a> provides Express middleware to enable CORS with various options.<\/li>\n<\/ul>\n<p>&#8211; create an Express app, then add <code>body-parser<\/code> (json, urlencoded) and <code>cors<\/code> middlewares using <code>app.use()<\/code> method. Notice that we set origin: <code>http:\/\/localhost:8081<\/code>.<br \/>\n&#8211; define a GET route which is simple for test.<br \/>\n&#8211; listen on port 8080 for incoming requests.<\/p>\n<p>Now let&#8217;s run the app with command: <code>node server.js<\/code>.<br \/>\nOpen your browser with url <a href=\"http:\/\/localhost:8080\/\">http:\/\/localhost:8080\/<\/a>, you will see:<\/p>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-setup-server.png\" alt=\"angular-16-node-express-postgresql-example-setup-server\" width=\"360\" height=\"120\" class=\"alignnone size-full wp-image-15384 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-setup-server.png\" alt=\"angular-16-node-express-postgresql-example-setup-server\" width=\"360\" height=\"120\" class=\"alignnone size-full wp-image-15384 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-setup-server.png 360w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-setup-server-300x100.png 300w\" sizes=\"(max-width: 360px) 100vw, 360px\" \/><\/noscript><\/p>\n<p>Yeah, the first step is done. We&#8217;re gonna work with Sequelize in the next section.<\/p>\n<h3><span id=\"Configure_PostgreSQL_database_038_Sequelize\">Configure PostgreSQL database &#038; Sequelize<\/span><\/h3>\n<p>In the <em>app<\/em> folder, we create a separate <em>config<\/em> folder for configuration with <em>db.config.js<\/em> file like this:<\/p>\n<pre><code class=\"language-js\">module.exports = {\r\n  HOST: \"localhost\",\r\n  USER: \"postgres\",\r\n  PASSWORD: \"123\",\r\n  DB: \"testdb\",\r\n  dialect: \"postgres\",\r\n  pool: {\r\n    max: 5,\r\n    min: 0,\r\n    acquire: 30000,\r\n    idle: 10000\r\n  }\r\n};\r\n<\/code><\/pre>\n<p>First five parameters are for PostgreSQL connection.<br \/>\n<code>pool<\/code> is optional, it will be used for Sequelize connection pool configuration:<\/p>\n<ul>\n<li><code>max<\/code>: maximum number of connection in pool<\/li>\n<li><code>min<\/code>: minimum number of connection in pool<\/li>\n<li><code>idle<\/code>: maximum time, in milliseconds, that a connection can be idle before being released<\/li>\n<li><code>acquire<\/code>: maximum time, in milliseconds, that pool will try to get connection before throwing error<\/li>\n<\/ul>\n<p>For more details, please visit <a href=\"https:\/\/sequelize.org\/master\/class\/lib\/sequelize.js~Sequelize.html#instance-constructor-constructor\">API Reference for the Sequelize constructor<\/a>.<\/p>\n<h3><span id=\"Initialize_Sequelize\">Initialize Sequelize<\/span><\/h3>\n<p>We&#8217;re gonna initialize Sequelize in <strong>app<\/strong>\/<strong>models<\/strong> folder that will contain model in the next step.<\/p>\n<p>Now create <strong>app<\/strong>\/<strong>models<\/strong>\/<em>index.js<\/em> with the following code:<\/p>\n<pre><code class=\"language-js\">const dbConfig = require(\"..\/config\/db.config.js\");\r\n\r\nconst Sequelize = require(\"sequelize\");\r\nconst sequelize = new Sequelize(dbConfig.DB, dbConfig.USER, dbConfig.PASSWORD, {\r\n  host: dbConfig.HOST,\r\n  dialect: dbConfig.dialect,\r\n  operatorsAliases: false,\r\n\r\n  pool: {\r\n    max: dbConfig.pool.max,\r\n    min: dbConfig.pool.min,\r\n    acquire: dbConfig.pool.acquire,\r\n    idle: dbConfig.pool.idle\r\n  }\r\n});\r\n\r\nconst db = {};\r\n\r\ndb.Sequelize = Sequelize;\r\ndb.sequelize = sequelize;\r\n\r\ndb.tutorials = require(\".\/tutorial.model.js\")(sequelize, Sequelize);\r\n\r\nmodule.exports = db;\r\n<\/code><\/pre>\n<p>Don&#8217;t forget to call <code>sync()<\/code> method in <em>server.js<\/em>:<\/p>\n<pre><code class=\"language-js\">...\r\nconst app = express();\r\napp.use(...);\r\n\r\nconst db = require(\".\/app\/models\");\r\ndb.sequelize.sync()\r\n  .then(() => {\r\n    console.log(\"Synced db.\");\r\n  })\r\n  .catch((err) => {\r\n    console.log(\"Failed to sync db: \" + err.message);\r\n  });\r\n\r\n...\r\n<\/code><\/pre>\n<p>In development, you may need to drop existing tables and re-sync database. Just use <code>force: true<\/code> as following code:<\/p>\n<pre><code class=\"language-js\">\r\ndb.sequelize.sync({ force: true }).then(() => {\r\n  console.log(\"Drop and re-sync db.\");\r\n});\r\n<\/code><\/pre>\n<h3><span id=\"Define_the_Sequelize_Model\">Define the Sequelize Model<\/span><\/h3>\n<p>In <em>models<\/em> folder, create <em>tutorial.model.js<\/em> file like this:<\/p>\n<pre><code class=\"language-js\">module.exports = (sequelize, Sequelize) => {\r\n  const Tutorial = sequelize.define(\"tutorial\", {\r\n    title: {\r\n      type: Sequelize.STRING\r\n    },\r\n    description: {\r\n      type: Sequelize.STRING\r\n    },\r\n    published: {\r\n      type: Sequelize.BOOLEAN\r\n    }\r\n  });\r\n\r\n  return Tutorial;\r\n};\r\n<\/code><\/pre>\n<p>This Sequelize Model represents <strong>tutorials<\/strong> table in PostgreSQL database. These columns will be generated automatically: <em>id<\/em>, <em>title<\/em>, <em>description<\/em>, <em>published<\/em>, <em>createdAt<\/em>, <em>updatedAt<\/em>.<\/p>\n<p>After initializing Sequelize, we don&#8217;t need to write CRUD functions, Sequelize supports all of them:<\/p>\n<ul>\n<li>create a new Tutorial: <code><a href=\"https:\/\/sequelize.org\/master\/class\/lib\/model.js~Model.html#static-method-create\">create<\/a>(object)<\/code><\/li>\n<li>find a Tutorial by id: <code><a href=\"https:\/\/sequelize.org\/master\/class\/lib\/model.js~Model.html#static-method-findByPk\">findByPk<\/a>(id)<\/code><\/li>\n<li>get all Tutorials: <code><a href=\"https:\/\/sequelize.org\/master\/class\/lib\/model.js~Model.html#static-method-findAll\">findAll<\/a>()<\/code><\/li>\n<li>update a Tutorial by id: <code><a href=\"https:\/\/sequelize.org\/master\/class\/lib\/model.js~Model.html#static-method-update\">update<\/a>(data, where: { id: id })<\/code><\/li>\n<li>remove a Tutorial: <code><a href=\"https:\/\/sequelize.org\/master\/class\/lib\/model.js~Model.html#static-method-destroy\">destroy<\/a>(where: { id: id })<\/code><\/li>\n<li>remove all Tutorials: <code>destroy(where: {})<\/code><\/li>\n<li>find all Tutorials by title: <code>findAll({ where: { title: ... } })<\/code><\/li>\n<\/ul>\n<p>These functions will be used in our Controller.<\/p>\n<p>We can improve the example by adding Comments for each Tutorial. It is the One-to-Many Relationship and I write a tutorial for this at:<br \/>\n<a href=\"https:\/\/bezkoder.com\/sequelize-associate-one-to-many\/\">Node.js Sequelize Associations: One-to-Many example<\/a><\/p>\n<p>Or you can add Tags for each Tutorial and add Tutorials to Tag (Many-to-Many Relationship):<br \/>\n<a href=\"https:\/\/bezkoder.com\/sequelize-associate-many-to-many\/\">Node.js Sequelize Associations: Many-to-Many example<\/a><\/p>\n<h3><span id=\"Create_the_Controller\">Create the Controller<\/span><\/h3>\n<p>Inside <strong>app<\/strong>\/<strong>controllers<\/strong> folder, let&#8217;s create <em>tutorial.controller.js<\/em> with these CRUD functions:<\/p>\n<ul>\n<li>create<\/li>\n<li>findAll<\/li>\n<li>findOne<\/li>\n<li>update<\/li>\n<li>delete<\/li>\n<li>deleteAll<\/li>\n<li>findAllPublished<\/li>\n<\/ul>\n<pre><code class=\"language-js\">const db = require(\"..\/models\");\r\nconst Tutorial = db.tutorials;\r\nconst Op = db.Sequelize.Op;\r\n\r\n\/\/ Create and Save a new Tutorial\r\nexports.create = (req, res) => {\r\n  \r\n};\r\n\r\n\/\/ Retrieve all Tutorials from the database.\r\nexports.findAll = (req, res) => {\r\n  \r\n};\r\n\r\n\/\/ Find a single Tutorial with an id\r\nexports.findOne = (req, res) => {\r\n  \r\n};\r\n\r\n\/\/ Update a Tutorial by the id in the request\r\nexports.update = (req, res) => {\r\n  \r\n};\r\n\r\n\/\/ Delete a Tutorial with the specified id in the request\r\nexports.delete = (req, res) => {\r\n  \r\n};\r\n\r\n\/\/ Delete all Tutorials from the database.\r\nexports.deleteAll = (req, res) => {\r\n  \r\n};\r\n\r\n\/\/ Find all published Tutorials\r\nexports.findAllPublished = (req, res) => {\r\n  \r\n};\r\n<\/code><\/pre>\n<p>You can continue with step by step to implement this Node.js Express App (with Github) in the post:<br \/>\n<a href=\"https:\/\/bezkoder.com\/node-express-sequelize-postgresql\/\">Node.js Express &#038; PostgreSQL: CRUD Rest APIs example with Sequelize<\/a><\/p>\n<h3><span id=\"Run_the_Nodejs_Express_Server\">Run the Node.js Express Server<\/span><\/h3>\n<p>Run our Node.js application with command: <code>node server.js<\/code>.<\/p>\n<h2><span id=\"Angular_16_Front-end\">Angular 16 Front-end<\/span><\/h2>\n<h3><span id=\"Overview-2\">Overview<\/span><\/h3>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-crud-client-overview.png\" alt=\"angular-16-node-express-postgresql-example-crud-client-overview\" width=\"700\" height=\"208\" class=\"alignnone size-full wp-image-15385 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-crud-client-overview.png\" alt=\"angular-16-node-express-postgresql-example-crud-client-overview\" width=\"700\" height=\"208\" class=\"alignnone size-full wp-image-15385 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-crud-client-overview.png 700w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-crud-client-overview-300x89.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/noscript><\/p>\n<p>\u2013 The <code>App<\/code> component is a container with <code>router-outlet<\/code>. It has navbar that links to routes paths via <code>routerLink<\/code>.<\/p>\n<p>\u2013 <code>TutorialsList<\/code> component gets and displays Tutorials.<br \/>\n\u2013 <code>TutorialDetails<\/code> component has form for editing Tutorial&#8217;s details based on <code>:id<\/code>.<br \/>\n\u2013 <code>AddTutorial<\/code> component has form for submission new Tutorial.<\/p>\n<p>\u2013 These Components call <code>TutorialService<\/code> methods which use Angular <code>HTTPClient<\/code> to make HTTP requests and receive responses.<\/p>\n<h3><span id=\"Technology\">Technology<\/span><\/h3>\n<ul>\n<li>Angular 16<\/li>\n<li>Angular HttpClient<\/li>\n<li>Angular Router<\/li>\n<li>Bootstrap 4<\/li>\n<\/ul>\n<h3><span id=\"Project_Structure-2\">Project Structure<\/span><\/h3>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-client-project.png\" alt=\"angular-16-node-express-postgresql-example-client-project\" width=\"210\" height=\"690\" class=\"alignnone size-full wp-image-15386 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-client-project.png\" alt=\"angular-16-node-express-postgresql-example-client-project\" width=\"210\" height=\"690\" class=\"alignnone size-full wp-image-15386 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-client-project.png 210w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-express-postgresql-example-client-project-91x300.png 91w\" sizes=\"(max-width: 210px) 100vw, 210px\" \/><\/noscript><\/p>\n<p>&#8211; <code>tutorial.model.ts<\/code> exports the main class model: <code>Tutorial<\/code>.<br \/>\n&#8211; There are 3 components: <code>tutorials-list<\/code>, <code>tutorial-details<\/code>, <code>add-tutorial<\/code>.<br \/>\n&#8211; <code>tutorial.service<\/code> has methods for sending HTTP requests to the Apis.<br \/>\n&#8211; <strong>app-routing.module.ts<\/strong> defines routes for each component.<br \/>\n&#8211; <code>app<\/code> component contains router view and navigation bar.<br \/>\n&#8211; <code>app.module.ts<\/code> declares Angular components and import necessary modules.<\/p>\n<h3><span id=\"Setup_Angular_16_Project\">Setup Angular 16 Project<\/span><\/h3>\n<p>Let&#8217;s open cmd and use Angular CLI to create a new Angular Project as following command:<\/p>\n<pre><code class=\"language-bash\">ng new angular-16-crud\r\n? Would you like to add Angular routing? Yes\r\n? Which stylesheet format would you like to use? CSS\r\n<\/code><\/pre>\n<p>We also need to generate some Components and Services:<\/p>\n<pre><code class=\"language-bash\">ng g s services\/tutorial\r\n\r\nng g c components\/add-tutorial\r\nng g c components\/tutorial-details\r\nng g c components\/tutorials-list\r\n\r\nng g class models\/tutorial --type=model\r\n<\/code><\/pre>\n<h3><span id=\"Set_up_App_Module\">Set up App Module<\/span><\/h3>\n<p>Open <em>app.module.ts<\/em> and import <code>FormsModule<\/code>, <code>HttpClientModule<\/code>:<\/p>\n<pre><code class=\"language-js\">...\r\nimport { FormsModule } from '@angular\/forms';\r\nimport { HttpClientModule } from '@angular\/common\/http';\r\n\r\n@NgModule({\r\n  declarations: [ ... ],\r\n  imports: [\r\n    ...\r\n    FormsModule,\r\n    HttpClientModule\r\n  ],\r\n  providers: [],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n<\/code><\/pre>\n<h3><span id=\"Define_Routes_for_Angular_AppRoutingModule\">Define Routes for Angular AppRoutingModule<\/span><\/h3>\n<p>There are 3 main routes:<br \/>\n&#8211; <code>\/tutorials<\/code> for <code>tutorials-list<\/code> component<br \/>\n&#8211; <code>\/tutorials\/:id<\/code> for <code>tutorial-details<\/code> component<br \/>\n&#8211; <code>\/add<\/code> for <code>add-tutorial<\/code> component<\/p>\n<p><em>app-routing.module.ts<\/em><\/p>\n<pre><code class=\"language-js\">import { NgModule } from '@angular\/core';\r\nimport { RouterModule, Routes } from '@angular\/router';\r\nimport { TutorialsListComponent } from '.\/components\/tutorials-list\/tutorials-list.component';\r\nimport { TutorialDetailsComponent } from '.\/components\/tutorial-details\/tutorial-details.component';\r\nimport { AddTutorialComponent } from '.\/components\/add-tutorial\/add-tutorial.component';\r\n\r\nconst routes: Routes = [\r\n  { path: '', redirectTo: 'tutorials', pathMatch: 'full' },\r\n  { path: 'tutorials', component: TutorialsListComponent },\r\n  { path: 'tutorials\/:id', component: TutorialDetailsComponent },\r\n  { path: 'add', component: AddTutorialComponent }\r\n];\r\n\r\n@NgModule({\r\n  imports: [RouterModule.forRoot(routes)],\r\n  exports: [RouterModule]\r\n})\r\nexport class AppRoutingModule { }\r\n<\/code><\/pre>\n<h3><span id=\"Define_Model_Class\">Define Model Class<\/span><\/h3>\n<p>Our main model class <code>Tutorial<\/code> will be exported in <em>tutorial.model.ts<\/em> with 4 fields:<\/p>\n<ul>\n<li><code>id<\/code><\/li>\n<li><code>title<\/code><\/li>\n<li><code>description<\/code><\/li>\n<li><code>published<\/code><\/li>\n<\/ul>\n<p><strong>models<\/strong>\/<em>tutorial.model.ts<\/em><\/p>\n<pre><code class=\"language-js\">export class Tutorial {\r\n  id?: any;\r\n  title?: string;\r\n  description?: string;\r\n  published?: boolean;\r\n}\r\n<\/code><\/pre>\n<h3><span id=\"Create_Data_Service\">Create Data Service<\/span><\/h3>\n<p>This service will use Angular <code>HttpClient<\/code> to send HTTP requests.<br \/>\nYou can see that its functions includes CRUD operations and finder method.<\/p>\n<p><strong>services<\/strong>\/<em>tutorial.service.ts<\/em><\/p>\n<pre><code class=\"language-js\">import { Injectable } from '@angular\/core';\r\nimport { HttpClient } from '@angular\/common\/http';\r\nimport { Observable } from 'rxjs';\r\nimport { Tutorial } from '..\/models\/tutorial.model';\r\n\r\nconst baseUrl = 'http:\/\/localhost:8080\/api\/tutorials';\r\n\r\n@Injectable({\r\n  providedIn: 'root'\r\n})\r\nexport class TutorialService {\r\n\r\n  constructor(private http: HttpClient) { }\r\n\r\n  getAll(): Observable&lt;Tutorial[]> {\r\n    return this.http.get&lt;Tutorial[]>(baseUrl);\r\n  }\r\n\r\n  get(id: any): Observable&lt;Tutorial> {\r\n    return this.http.get(`${baseUrl}\/${id}`);\r\n  }\r\n\r\n  create(data: any): Observable&lt;any> {\r\n    return this.http.post(baseUrl, data);\r\n  }\r\n\r\n  update(id: any, data: any): Observable&lt;any> {\r\n    return this.http.put(`${baseUrl}\/${id}`, data);\r\n  }\r\n\r\n  delete(id: any): Observable&lt;any> {\r\n    return this.http.delete(`${baseUrl}\/${id}`);\r\n  }\r\n\r\n  deleteAll(): Observable&lt;any> {\r\n    return this.http.delete(baseUrl);\r\n  }\r\n\r\n  findByTitle(title: any): Observable&lt;Tutorial[]> {\r\n    return this.http.get&lt;Tutorial[]>(`${baseUrl}?title=${title}`);\r\n  }\r\n}\r\n<\/code><\/pre>\n<h3><span id=\"Create_Angular_16_Components\">Create Angular 16 Components<\/span><\/h3>\n<p>As you&#8217;ve known before, there are 3 components corresponding to 3 routes defined in <code>AppRoutingModule<\/code>.<\/p>\n<ul>\n<li>Add new Item Component<\/li>\n<li>List of items Component<\/li>\n<li>Item details Component<\/li>\n<\/ul>\n<p>You can continue with step by step to implement this Angular App in the post:<br \/>\n<a href=\"https:\/\/www.bezkoder.com\/angular-16-crud-example\/\">Angular 16 example: CRUD App with Web API<\/a><\/p>\n<h3><span id=\"Run_the_Angular_16_App\">Run the Angular 16 App<\/span><\/h3>\n<p>You can run this App with command: <code>ng serve --port 8081<\/code>.<br \/>\nIf the process is successful, open Browser with Url: <code>http:\/\/localhost:8081\/<\/code> and check it.<\/p>\n<h2><span id=\"Further_Reading\">Further Reading<\/span><\/h2>\n<ul>\n<li><a href=\"http:\/\/expressjs.com\/en\/guide\/routing.html\">Express.js Routing<\/a><\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/express\">https:\/\/www.npmjs.com\/package\/express<\/a><\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/pg\">https:\/\/www.npmjs.com\/package\/pg<\/a><\/li>\n<li><a href=\"https:\/\/sequelize.org\/master\/\">Tutorials and Guides for Sequelize v5<\/a><\/li>\n<li><a href=\"https:\/\/angular.io\/guide\/http\">Angular HttpClient<\/a><\/li>\n<li><a href=\"https:\/\/angular.io\/guide\/template-syntax\">Angular Template Syntax<\/a><\/li>\n<\/ul>\n<h2><span id=\"Source_Code\">Source Code<\/span><\/h2>\n<p>You can find Github source code for this tutorial at: <a href=\"https:\/\/www.githubcode.com\/angular-express-github\/\">Angular + Express Github<\/a><\/p>\n<h2><span id=\"Conclusion\">Conclusion<\/span><\/h2>\n<p>Now we have an overview of Angular 16 + Node.js Express + PostgreSQL example when building a full-stack CRUD App.<\/p>\n<p>We also take a look at client-server architecture for REST API using Express &#038; Sequelize ORM, as well as Angular 16 project structure for building a front-end app to make HTTP requests and consume responses.<\/p>\n<p>Next tutorials show you more details about how to implement the system (with Github):<br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/node-express-sequelize-postgresql\/\">Back-end<\/a><\/p>\n<p>&#8211; Front-end: <a href=\"https:\/\/www.bezkoder.com\/angular-16-crud-example\/\">Angular 16 CRUD example with Rest API<\/a><\/p>\n<p>You will want to know how to run both projects in one place:<br \/>\n<a href=\"https:\/\/www.bezkoder.com\/integrate-angular-12-node-js\/\">How to Integrate Angular with Node.js Restful Services<\/a><\/p>\n<p>More Practice:<br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/node-js-angular-16-jwt-auth\/\">Angular 16 + Node.js: JWT Authentication &#038; Authorization example<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-16-node-express-file-upload\/\">File Upload using Angular 16 and Node.js<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/server-side-pagination-node-js-angular\/\">Server side Pagination with Node.js and Angular<\/a><\/p>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/10\/server-side-pagination-node-js-angular-ui-change-size.png\" alt=\"server-side-pagination-node-js-angular-ui-change-size\" width=\"660\" height=\"610\" class=\"alignnone size-full wp-image-4841 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/10\/server-side-pagination-node-js-angular-ui-change-size.png\" alt=\"server-side-pagination-node-js-angular-ui-change-size\" width=\"660\" height=\"610\" class=\"alignnone size-full wp-image-4841 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/10\/server-side-pagination-node-js-angular-ui-change-size.png 660w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/10\/server-side-pagination-node-js-angular-ui-change-size-300x277.png 300w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/noscript><\/p>\n<p>Serverless with Firebase:<br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-16-firebase-crud\/\">Angular 16 Firebase Database CRUD example<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-16-firestore-crud\/\">Angular 16 Firestore CRUD example<\/a><\/p>\n<p>If you want to implement Form Validation, please visit:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.bezkoder.com\/angular-16-form-validation\/\">Angular 16 Reactive Form Validation example<\/a><\/li>\n<li><a href=\"https:\/\/www.bezkoder.com\/angular-16-template-driven-form-validation\/\">Angular 16 Template Driven Form Validation example<\/a><\/li>\n<\/ul>\n<p>Happy learning, see you again!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, I will show you how to build a full-stack (Angular 16 + Node.js + Express + PostgreSQL) example with a CRUD Application. The back-end server uses Node.js + Express for REST APIs, front-end side is an Angular App with HttpClient and Router. Related Posts: &#8211; Server side Pagination with Node.js and Angular [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":15373,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[103,49,27],"tags":[104,289,82,38,28,37,39,84],"class_list":["post-15372","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-full-stack","category-node-js","tag-angular","tag-angular-16","tag-crud","tag-express","tag-node-js","tag-postgresql","tag-rest-api","tag-sequelize"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Angular 16 + Node.js Express + PostgreSQL example: CRUD App - BezKoder<\/title>\n<meta name=\"description\" content=\"Build full stack example using Angular 16, Node.js Express, Sequelize, PostgreSQL - Angular &amp; Nodejs CRUD example with PostgreSQL tutorial\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.bezkoder.com\/angular-16-node-js-express-postgresql\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular 16 + Node.js Express + PostgreSQL example: CRUD App - BezKoder\" \/>\n<meta property=\"og:description\" content=\"Build full stack example using Angular 16, Node.js Express, Sequelize, PostgreSQL - Angular &amp; Nodejs CRUD example with PostgreSQL tutorial\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.bezkoder.com\/angular-16-node-js-express-postgresql\/\" \/>\n<meta property=\"og:site_name\" content=\"BezKoder\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/bezkoder\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-08T01:49:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-16T03:06:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-js-postgresql-crud-example-feature.png\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"410\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"bezkoder\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"bezkoder\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.bezkoder.com\/angular-16-node-js-express-postgresql\/\",\"url\":\"https:\/\/www.bezkoder.com\/angular-16-node-js-express-postgresql\/\",\"name\":\"Angular 16 + Node.js Express + PostgreSQL example: CRUD App - BezKoder\",\"isPartOf\":{\"@id\":\"https:\/\/www.bezkoder.com\/#website\"},\"datePublished\":\"2023-06-08T01:49:42+00:00\",\"dateModified\":\"2023-10-16T03:06:18+00:00\",\"author\":{\"@id\":\"https:\/\/www.bezkoder.com\/#\/schema\/person\/eb4ad162bbd76adb4fde3089aa839a5a\"},\"description\":\"Build full stack example using Angular 16, Node.js Express, Sequelize, PostgreSQL - Angular & Nodejs CRUD example with PostgreSQL tutorial\",\"breadcrumb\":{\"@id\":\"https:\/\/www.bezkoder.com\/angular-16-node-js-express-postgresql\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.bezkoder.com\/angular-16-node-js-express-postgresql\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.bezkoder.com\/angular-16-node-js-express-postgresql\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.bezkoder.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular 16 + Node.js Express + PostgreSQL example: CRUD App\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.bezkoder.com\/#website\",\"url\":\"https:\/\/www.bezkoder.com\/\",\"name\":\"BezKoder\",\"description\":\"Mobile &amp; Web App Development Tutorials\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.bezkoder.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.bezkoder.com\/#\/schema\/person\/eb4ad162bbd76adb4fde3089aa839a5a\",\"name\":\"bezkoder\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.bezkoder.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/67090ba8df7b2956375fa0fdf09902595527a34cf7d741bdebbbc8e63fcdd7b5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/67090ba8df7b2956375fa0fdf09902595527a34cf7d741bdebbbc8e63fcdd7b5?s=96&d=mm&r=g\",\"caption\":\"bezkoder\"},\"url\":\"https:\/\/www.bezkoder.com\/author\/bezkoder\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular 16 + Node.js Express + PostgreSQL example: CRUD App - BezKoder","description":"Build full stack example using Angular 16, Node.js Express, Sequelize, PostgreSQL - Angular & Nodejs CRUD example with PostgreSQL tutorial","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.bezkoder.com\/angular-16-node-js-express-postgresql\/","og_locale":"en_US","og_type":"article","og_title":"Angular 16 + Node.js Express + PostgreSQL example: CRUD App - BezKoder","og_description":"Build full stack example using Angular 16, Node.js Express, Sequelize, PostgreSQL - Angular & Nodejs CRUD example with PostgreSQL tutorial","og_url":"https:\/\/www.bezkoder.com\/angular-16-node-js-express-postgresql\/","og_site_name":"BezKoder","article_publisher":"https:\/\/www.facebook.com\/bezkoder","article_published_time":"2023-06-08T01:49:42+00:00","article_modified_time":"2023-10-16T03:06:18+00:00","og_image":[{"width":750,"height":410,"url":"https:\/\/www.bezkoder.com\/wp-content\/uploads\/angular-16-node-js-postgresql-crud-example-feature.png","type":"image\/png"}],"author":"bezkoder","twitter_card":"summary_large_image","twitter_misc":{"Written by":"bezkoder","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.bezkoder.com\/angular-16-node-js-express-postgresql\/","url":"https:\/\/www.bezkoder.com\/angular-16-node-js-express-postgresql\/","name":"Angular 16 + Node.js Express + PostgreSQL example: CRUD App - BezKoder","isPartOf":{"@id":"https:\/\/www.bezkoder.com\/#website"},"datePublished":"2023-06-08T01:49:42+00:00","dateModified":"2023-10-16T03:06:18+00:00","author":{"@id":"https:\/\/www.bezkoder.com\/#\/schema\/person\/eb4ad162bbd76adb4fde3089aa839a5a"},"description":"Build full stack example using Angular 16, Node.js Express, Sequelize, PostgreSQL - Angular & Nodejs CRUD example with PostgreSQL tutorial","breadcrumb":{"@id":"https:\/\/www.bezkoder.com\/angular-16-node-js-express-postgresql\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.bezkoder.com\/angular-16-node-js-express-postgresql\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.bezkoder.com\/angular-16-node-js-express-postgresql\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.bezkoder.com\/"},{"@type":"ListItem","position":2,"name":"Angular 16 + Node.js Express + PostgreSQL example: CRUD App"}]},{"@type":"WebSite","@id":"https:\/\/www.bezkoder.com\/#website","url":"https:\/\/www.bezkoder.com\/","name":"BezKoder","description":"Mobile &amp; Web App Development Tutorials","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.bezkoder.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.bezkoder.com\/#\/schema\/person\/eb4ad162bbd76adb4fde3089aa839a5a","name":"bezkoder","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.bezkoder.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/67090ba8df7b2956375fa0fdf09902595527a34cf7d741bdebbbc8e63fcdd7b5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/67090ba8df7b2956375fa0fdf09902595527a34cf7d741bdebbbc8e63fcdd7b5?s=96&d=mm&r=g","caption":"bezkoder"},"url":"https:\/\/www.bezkoder.com\/author\/bezkoder\/"}]}},"_links":{"self":[{"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/posts\/15372","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/comments?post=15372"}],"version-history":[{"count":0,"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/posts\/15372\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/media\/15373"}],"wp:attachment":[{"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/media?parent=15372"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/categories?post=15372"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/tags?post=15372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}