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.
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
- 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.
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.

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’s start with our Angular 7 app. Using above Node.JS API endpoints, we are going to perform CRUD operation. This will be the screen of our Angular app.

Create your angular app using the ng new <app-name>
command in your terminal.
1. Creating Model Class In Angular
After creating our app, let’s first create our Product Model
class as per our database Product Document
properties.
ProductModel.ts
2. Creating Service In Angular
Let’s create our Product Service
class, which will interact with our Node.JS endpoints for all product related operations.
product.service.ts
We have imported HttpClient
and ProductModel
in our service class.
This is our service url endpoint.
baseurl: string = “http://localhost:3000/”;
In this class, we have different methods. These are:
getAllProducts()
: This method is used to get all products. We are using HTTPGET
method ofHttpClient
object with service endpoint.
getProductById(id: string)
: This method is used to get a product by product id. We are using sameHTTP GET
method ofHTTPClient
object with service endpoint.Product ID
is passed in service url.
addProduct(product: ProductModel)
: This method is used to add product. We are usingHTTP POST
method ofHTTPClient
object with service endpoint. Product object will be send in request body.
deleteProduct(id: string)
: This method is used to delete the product. We are usingHTTP DELETE
method ofHTTPClient
object with the service endpoint. We are just passing theProduct ID
in the service url.
updateProduct(product: ProductModel)
: This method is used to update the product. We are usingHTTP PUT
method ofHTTPClient
object with the service endpoint. We are passingProductID
in service endpoint url, and new product in the request body.
Import Product Service in app.module
Now, after creating the product service, we have to import this in our app.module.ts
file. Let’s do it now.
app.module.ts
Add this line on the top of app.module.ts
file.
import { ProductService } from ‘./product.service’;
And this ProductService
in Providers[]
array.
providers: [ProductService]
3. Creating Component For Listing All Products
First of all, we are going to fetch all the products in our database. Create list-products
component, and add this to our routing module. This component will fetch all the products from the database and display it in tabular form. Add routing details of this component in our route file.
app-routing.module.ts
Import ListProductsComponent
in our routing file.
import { ListProductsComponent } from ‘./list-products/list-products.component’;
And, add this in routes
constant.
{ path: ”, component: ListProductsComponent, pathMatch: ‘full’ }
This is our list-products
component html file.
list-products.component.html
list-products.component.ts
To get the list of all products, we have created getAllProducts()
function, and call it in ngOnInit()
.
4. Creating Component For Adding Product
This component will be used to add a product in our database. Add routing details of this component in our route file.
app-routing.module.ts
Add this line on the top of app-routing.module.ts
file.
import { AddProductComponent } from ‘./add-product/add-product.component’;
And, add this in routes
constant.
{ path: ‘add-product’, component: AddProductComponent }
This is our add-product component file.
add-product.component.html
add-product.component.ts
In this component class, we have used Validators to check whether all required fields are filled or not. When user click on Add Product
button on Product List page, user will be navigating to the Add Product
page.

In the above pic, if you try to save without filing all the fields, it will red highlight the textbook and let you not to save the product. So, fill all the fields and save the new product. As soon as your product is saved, you will be redirecting again to the all products page with newly product added.
Also, notice the following code in list-products.component.html
file. We have (click)
event on the Add Product
button, and calling the addProduct()
method of list-products.component.ts
class. In this method, we are simply navigating to our route add-product
, and opening the add-product
component page.
5. Delete Product
In order to delete any product, we don’t need to create any component. For each product in grid on list-products.component.html
component, we have Delete
button attached to it. There is an deleteProduct(product)
method on (click)
event of this Delete button. deleteProduct(product)
method is defined in list-products.component.ts
file.
After deleting the product, we are fetching all the products again by calling this.getAllProducts()
method.
6. Creating Component For Updating Product
In order to update any product, we are going to create another component. Create component edit-product in your app. Add creating your component, we have to define the route as well in your app. Open the app-routing.module.ts file and import this component there.
app-routing.module.ts
import { EditProductComponent } from ‘./edit-product/edit-product.component’;
Add the route in routes constant.
{ path: ‘edit-product’, component: EditProductComponent}
edit-product.component.html
Our edit-product component html file is similar to add-product component html file. So, you can simply copy paste the same html here.
edit-product.component.ts
Here, we are using localStorage.getItem()
to get the productId
, which was stored in our list-product.component.ts
file using localStorage.setItem()
. So, let’s first get the productId
first from localStorage()
in ngOnInit()
method. See below code, how we are setting productId
in localStorage()
. After that, we are navigating to our edit component page.
list-product.component.ts
After retrieving the productId
from localStorage
, we are going to get the product using this productId
in ngOnInit()
function.
edit-product.component.ts
On successful, we are setting the form values with the response data using patchValue()
method.

Update the values in the form and click on Update
button. It will call the onSubmit()
function of edit-product.component.ts
class file. After updating the values in database, it will be redirected to product listing component page.
So, we have done with our CRUD operation on our product model. Let me show you complete app-routing
and app.module
files.
Angular 7 Routing: app-routing.module.ts
Angular 7 Module: app.module.ts
Install Bootstrap and FontAwesome in Angular 7
Use this npm command to install the Bootstrap
and FontAwesome
in your project.
npm install bootstrap font-awesome
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.
Angular Best Books
Summary
In this blog, we learned about how to perform CRUD operation on our MongoDB database using Node.Js Api. I also shared the project files on Github, from where you can view and download it.
Thanks for your work.
We have two user groups who are able to change different parts of our model.
Would you recommend to generate two edit components for the different user groups?
Pingback: itemprop="name">This Is Why Learning New JavaScript ES6 Syntax Is So Famous! - ZeptoBook
Hi Adesh,
Please let me know if you have any examples for State management using Angular7 or etc.
Hi Pardha,
Can you check this link? It might help you.
https://www.zeptobook.com/share-data-between-components-in-angular/
I downloaded the project from GitHub and I have runned it with ng serve -o after installing the modules. But, it gives this errror:
”
zone.js:2969 OPTIONS http://localhost:3000/Products net::ERR_CONNECTION_REFUSED
core.js:12501 ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: “Unknown Error”, url: null, ok: false, …}
“
“This is our service url endpoint.
baseurl: string = “http://localhost:3000/””
That seems to be causing the error.
What does “servirce url endpoint” mean?