In this blog we are going to create a very basic Angular 7 CRUD Create Read Update and Delete application with Node.JS REST API endpoints. With the help of our REST API we will work on our MongoDB database and perform various operations on Products collection.

In the previous post I created the Node.JS API endpoints and described everything related to Node.JS and MongoDB database. Please go through my previous post before reading this blog for better understanding.

How to create Restful CRUD API with Node.js MongoDB and Express.js

Angular 7 Prerequisites

Before start writing the Angular 7 app please make sure that you have latest version of Node.JS and NPM installed on your system and Angular 7 CLI installed on your system.

You can go through below links for more details about updating Angular 6 to Angular 7 and creating your first Angular 7 app.

Update Angular 6 to Angular 7 version and creating your first app in Angular 7.

MongoDB Backend Overview

Let me introduce you about the MongoDB Document structure. We have Products collection in our database and this Products collection have multiple documents related to various products.

This is the screenshot of our MongoDB Products collection.

Products Collection

And this is the screenshot of each Product document.

Node.JS Rest API Endpoints

You can get all details of Node.JS Rest API in the above link which I shared on the top of this post. Let me share again which endpoints we have for our application. These are the list of our API endpoints.

Creating Angular 7 Project

Let us start with our Angular 7 app. Using above Node.JS API endpoints we are going to perform CRUD operation.

1. Creating Model Class In Angular

2. Creating Service In Angular

3. Creating Component For Listing All Products

4. Creating Component For Adding Product

5. Delete Product

6. Creating Component For Updating Product

Angular 7 Routing app routing.module.ts

Angular 7 Module app.module.ts

Install Bootstrap and FontAwesome in Angular 7

Use npm command to install the Bootstrap and FontAwesome in your project.

Importing the Bootstrap and FontAwesome

After installation you can add these css files in your styles.css file.

Angular 7 Project Structure

This will be our app structure.

Download

You can download all the project files from GitHub.

Summary

In this blog we learned about how to perform CRUD operation on our MongoDB database using Node.Js Api. Project files are shared on Github from where you can view and download it.

Further Reading

How to create Restful CRUD API with Node.js MongoDB and Express.js. Eleven Ways To Learn Javascript Array Iteration Effectively. JavaScript Fundamentals Every Beginner Should Know.