Angular 2 CRUD application using Nodejs

HTTP requests are very crucial and much needed in any modern front-end application and Angular 2 does this job very effortlessly. Angular 2 comes with its own HTTP library. Here, we will create Angular 2 CRUD application using Nodejs.

We will use Nodejs to create our REST API and we will use Angular 2’s HTTP library to make HTTP requests with the help of Observables. In this article, We will make a list of user’s and we will create functionality to Update/ Remove the user from the list of users.

The final outcome of this article shown below in Image.

 Download

1. Angular 2 HTTP library

=> First take a look into Angular 2 HTTP library before creating our angular 2 CRUD application. Let’s understand what each request does and arguments required to it. Angular 2 HTTP library have different types of requests listed below,

1. Request :
   • request(url: string | Request, options?: RequestOptionsArgs): Observable<Response>;
   • The first argument is a URL and the second argument is optional which can be anything.
   • Can perform any type of request.
2. get
   • get(url: string, options?: RequestOptionsArgs): Observable<Response>;
   • The first argument is a URL and the second argument is optional which can be anything .
   • Performs a request with `get` HTTP method.
3. post
   • post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response>;
   • The first argument is a URL and the second argument is optional which can be anything.
   • Performs a request with `post` HTTP method.
4. put
   • put(url: string, body: any, options?: RequestOptionsArgs): Observable<Response>;
   • The first argument is a URL and the second argument is optional which can be anything.
   • Performs a request with `put` HTTP method.
5. delete
   • delete(url: string, options?: RequestOptionsArgs): Observable<Response>;
   • The first argument is a URL and the second argument is optional which can be anything.
   • Performs a request with `delete` HTTP method.
6. patch
   • patch(url: string, body: any, options?: RequestOptionsArgs): Observable<Response>;
   • The first argument is a URL and the second argument is optional which can be anything.
   • Performs a request with `patch` HTTP method.
7. head
   • head(url: string, options?: RequestOptionsArgs): Observable<Response>;
   • The first argument is a URL and the second argument is optional which can be anything.
   • Performs a request with `head` HTTP method.

2. Setting up our Application

Let’s use Angular CLI to setup our application. If you don’t have Angular CLIinstalled on your machine run the below command to install it globally.
npm install -g angular-cli
After Angular CLI installation,to create a new Angular project Run below command. This command will create all the necessary files, download all the required external dependencies and do all of the setup work for us.

ng new AppName

3. Angular 2 CRUD application using Nodejs

=> Till now we understood Angular’s HTTP library and how many methods it has and Now let’s create angular service for our application.

=>In this service, we will implement methods to get a list of users, update a single user, add a user to the listand delete a user from the list. Before going any further let’s take a look at theapp.module.ts file,

app.module.ts:

/*
* Angular 2 CRUD application using Nodejs
* @autthor Shashank Tiwari
*/
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { FormSupportingModulesModule } from './modules/form-supporting-modules/form-supporting-modules.module';
import { ServicesModule } from './services/services.module';

import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
FormSupportingModulesModule,
ServicesModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

=> Now if you have notice, We have included three more modules into import array HttpClientModule, FormSupportingModule, and ServicesModule. Let’s understand why we need these modules,

1. HttpClientModule => If your application uses HTTP library, then you will have import this module.

2. FormSupportingModule => As the name of the module reads, you will add the all the form related module here.

3. ServicesModule => In this module, you will register the all the here.

4. Adding Services Module and General App supporting modules

=> In the last section, we understood that we will create two more modules i.e.FormSupportingModule, andServicesModule.

=> To createFormSupportingModule, you will create a separate folder named as /modules inside the /app folder. Now make sure you are into the /modules folder, and run the below command,
ng generate module form-supporting

=> Now the above command will create form-supporting.module.ts under /form-supporting folder, in which we will register our Form modules. So open theform-supporting.module.ts and below code into it,

form-supporting.module.ts :

/*
* Angular 2 CRUD application using Nodejs
* @autthor Shashank Tiwari
*/
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
],
declarations: [],
exports: [
FormsModule,
ReactiveFormsModule,
]
})
export class FormSupportingModule { }

=> We will create a module named as servicesand all of our services will go under/services folder. The Services Module will add those services to our application.

=> So next time when you create any new service you don’t have to touch the app.moudle.ts file, Just add into service.module.ts file and you are done.

=>To create a service module run below command and add the below code into it,
ng generate module services

services.module.ts:

/*
* Angular 2 CRUD application using Nodejs
* @autthor Shashank Tiwari
*/
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { FormService } from './form.service';
import { HttpService } from './http.service';

@NgModule({
imports: [
CommonModule
],
declarations: [],
providers: [
FormService,
HttpService
]
})
export class ServicesModule { }

=> Here we will have two service forms.service.ts and http.service.ts. Each service has it’s own agenda, here FormService will help you when you create the Form using which you willadd/updateuser details.

=>HttpService will hold the HTTP methods, which will be consumed by our AppComponent class. So let’s create these two services, to create them we will use below Angular CLI commands (make sure you are inside the /services folder),

1. For form.services.ts file, Execute: ng generate service form
2. For http.services.ts file, Execute: ng generate service http

service.modules.ts:

/*
* Angular 2 CRUD application using Nodejs
* @autthor Shashank Tiwari
*/
import { Injectable } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

import { CountryValidation } from './../classes/country-validation';
import { EmailValidation } from './../classes/email-validation';
import { UserNameValidation } from './../classes/username-validation';

@Injectable({
  providedIn: 'root'
})
export class FormService {

constructor() { }

createUserForm(): FormGroup {
return new FormBuilder().group({
username: new UserNameValidation(),
email: new EmailValidation(),
country: new CountryValidation(),
});
}
}

Explanation:

1. When you create an Angular application on a big scale, it recommended to keep your application modular. So I have kept my habit to keep all of my Angular application modular.
2. You can write above code in Component class without any doubt, but for the sake of modularity, I have kept this code in separate file.

=> Let’s take a look at HTTP service where we will use Angular’s HTTP library to make HTTP calls,
http.service.ts:

/*
* Angular 2 CRUD application using Nodejs
* @autthor Shashank Tiwari
*/
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

import { environment } from './../../environments/environment';

import { AddUserRequest } from './../interfaces/add-user-request';
import { AddUserResponse } from './../interfaces/add-user-response';
import { GetUserResponse } from './../interfaces/get-user-response';
import { UpdateUserResponse } from './../interfaces/update-user-response';
import { DeleteUserResponse } from './../interfaces/delete-user-response';

@Injectable({
  providedIn: 'root'
})
export class HttpService {

constructor(
private http: HttpClient,
) { }

private httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
};

getUsers(): Observable<GetUserResponse> {
return this.http.get<GetUserResponse>(`${environment.apiUrl}/users`);
}

addUser(user: AddUserRequest): Observable<AddUserResponse> {
return this.http.post<AddUserResponse>(`${environment.apiUrl}/users`, JSON.stringify(user), this.httpOptions);
}

updateUser({ userId, user }: { userId: string, user: AddUserRequest }): Observable<UpdateUserResponse> {
return this.http.put<UpdateUserResponse>(`${environment.apiUrl}/users/${userId}`, JSON.stringify(user), this.httpOptions);
}

deleteUser({ userId }: { userId: string }): Observable<DeleteUserResponse>  {
return this.http.delete<DeleteUserResponse>(`${environment.apiUrl}/users/${userId}`, this.httpOptions);
}
}

Explanation:

1. We have imported all the interfaces from the folder called /interfaces. Just to save the length of this article, we won’t talk much about it. You will get all the interfaces when you download the code.
2. To access the HTTP library, you will have to create an instance of it and then you can call an appropriate method on that created instance.
3. As you can see here we have total 4 methods, every method name is self-explanatory. So just by looking at this code, you will get the purpose of each method.
4. Here each method returns an observable of some specific interface, These Observables will be consumed in your component class.

5. Add a New user (Creating a POSTHTTP Request)

=> In this application, we will have total three form fields i.e. username, email, and country. We have already created Service which holds the instance of the Form.

=> So we will useFormServiceservice and complete our form by which we can add the new user details in our database. Open the app.component.html file and add the below markup.

=> The below code is very straightforward to understand, we have created a very basic Angular form. Also, we have added error message as well.

app.component.html:

<!-- 
Angular 2 CRUD application using Nodejs
@autthor Shashank Tiwari
-->
<div class="app-heading">
<h2>
{{title}}
</h2>
</div>

<div class="container">

<div class="app-from">
<form  (ngSubmit)="submit()" [formGroup]="userForm" novalidate>
<div class="form-group app-from-group">
<label>Username</label>
<input type="text" name="username" class="form-control" placeholder="Enter your Username" formControlName='username' autocomplete="off">
<div class="feedback" *ngIf="!userForm.controls['username'].valid && (userForm.controls['username'].dirty || userForm.controls['username'].touched)">
<span *ngIf="userForm.controls['username'].errors.required">
Username is required
</span>
</div>
</div>
<div class="form-group app-from-group">
<label>Email</label>
<input type="email" name="email" class="form-control" placeholder="Enter your Email" formControlName='email'  autocomplete="off">
<div class="feedback" *ngIf="!userForm.controls['email'].valid && (userForm.controls['email'].dirty || userForm.controls['email'].touched)">
Email is required in Proper format
</div>
</div>
<div class="form-group app-from-group">
<label>Country</label>
<input type="country" name="country" class="form-control" placeholder="Enter your Country" formControlName='country'  autocomplete="off">
<div class="feedback" *ngIf="!userForm.controls['country'].valid && (userForm.controls['country'].dirty || userForm.controls['country'].touched)">
<span *ngIf="userForm.controls['country'].errors.required">
Country is required
</span>
</div>
</div>

<div class="form-group">
<label>&nbsp;</label>
<br/>
<button type='submit' class="btn btn-primary form-submit-button" [disabled]="!userForm.valid">Add User</button>
</div>
</form>
</div>

<div class="users-list">
<!-- 
        Markup to render the list of users
        -->
</div>
  
</div>

=> Now the above markup will have you the have nice and simple form to add a user. But to make it work you have to write some code in AppComponent class. Now open your app.component.tsand add the below code,

app.component.ts:

/**
 *  Angular 2 CRUD application using Nodejs
 *  @autthor Shashank Tiwari
 */ 
import { Component, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';

import { FormService } from './services/form.service';
import { HttpService } from './services/http.service';

import { User } from './interfaces/user';
import { GetUserResponse } from './interfaces/get-user-response';
import { AddUserResponse } from './interfaces/add-user-response';
import { UpdateUserResponse } from './interfaces/update-user-response';
import { DeleteUserResponse } from './interfaces/delete-user-response';

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

export class AppComponent implements OnInit {
title = 'Angular Http Crud Application using Nodejs';
usersList: User[] = [];
userForm: FormGroup;

constructor(
private formService: FormService,
private httpService: HttpService
) {
this.userForm = this.formService.createUserForm();
}

ngOnInit() {

}

submit() {
if (this.userForm.valid) {
this.addNewUser();
} else {
alert(`Enter all the user details`);
}
}

addNewUser() {
this.httpService.addUser(this.userForm.value)
.subscribe(
(response: AddUserResponse) => {
if (!response.error) {
this.usersList.push({
id: response.userId,
username: this.userForm.controls['username'].value,
email: this.userForm.controls['email'].value,
country: this.userForm.controls['country'].value,
});
this.userForm.reset();
} else {
alert(response.message);
}
},
(error) => {
console.warn(error);
alert(`Unable to add new user`);
}
);
}

}

Explanation:

Let’s understand each line one by one,

1. First, we have imported theFormService andHttpService services respectively then we have imported all the interfaces.
2. Then we have three properties in our AppComponentclass as shown below,
   1. title: Needs no explanation!
   2. usersList: This array of objects having User as an interface, each object would represent a single user detail.
   3. userForm: This property will hold the instance of a Form.
3. In constructor() method, you will use FormService to get the instance of a Form. Leave the ngOnInit() we will use it later.
4. On the click of submit() method, you will calladdNewUser() method. TheaddNewUser() method will basically consume the HttpService.
5. TheaddUser() method is defined inside HttpService, in which you will pass the value of the form.
6. After getting a response from the server, you will push the details inside the userList array.

6. Getting the list of users (Creating a GETHTTP Request)

=> Now that you have added a new user in your database, let’s fetch all those users and display them. The first step would be to write a markup in order to display the list of users.

=>In the below MarkUp, we have used *ngFor to iterate the users from the userList property, that’s all happening there.

app.component.html:

<!-- 
Angular 2 CRUD application using Nodejs
@autthor Shashank Tiwari
-->

<div class="users-list" *ngIf='usersList.length !== 0'>
<h3 class="user-list-heading">List of Users</h3>
<hr>
<div class="list-of-users">
<ul class="list-group">
<li *ngFor="let user of usersList" 
class="list-group-item" 
>
<span>{{ user.username}}</span>
</li>
</ul>
</div>
</div>

=> In the last section, we left ngOnInit() method blank. Here we will use it and we will consume the HttpService as usual to fetch the users stored in the database.

=> This will be a basic GET request which will fetch all users. Open the app.component.ts and all the below code,

app.compoent.ts:

/**
 *  Angular 2 CRUD application using Nodejs
 *  @autthor Shashank Tiwari
 */ 
ngOnInit() {
this.getUsers();
}

getUsers() {
this.httpService.getUsers()
.subscribe(
(response: GetUserResponse) => {
if (!response.error) {
this.usersList = response.users;
} else {
this.usersList = [];
}
},
(error) => {
console.warn(error);
this.usersList = [];
alert(`Unable to find User.`);
}
);
}

Explanation:

1. In ngOnInit() method, we have calledgetUsers() method of AppComponent class.
2. ThegetUsers() method will consume the HttpService and return all the users stored in the database.

7. Deleting an existing user (Creating a DELETEHTTP Request)

=> Here, we will add a button (let’s say X) to each row of the list to delete a particular user from the list. Whenever the user clicks on delete button we will make DELETE HTTP request to the server.

=> Behind the scene, our API will remove that user from the database. Also, we will remove that user from theuserListproperty of AppComponentclass.

Open theapp.component.htmlreplace the code for rendering the list view by this code,

app.component.html:

<!-- 
Angular 2 CRUD application using Nodejs
@autthor Shashank Tiwari
-->

<div class="users-list" *ngIf='usersList.length !== 0'>
<h3 class="user-list-heading">List of Users</h3>
<hr>
<div class="list-of-users">
<ul class="list-group">
<li *ngFor="let user of usersList" 
class="list-group-item" 
>
<span>{{ user.username}}</span>
<span class="deleteUsers" (click)="deleteUser(user.id)">X</span>
</li>
</ul>
</div>
</div>

Explanation:

In the below code,

1. When users click onXbutton we will calldeleteUser()method which is defined insideAppComponentclass.
2. In thedeleteUser()method we will pass theidof the user and based on thisiduser will be deleted from the list and from the databse as well.

=> Now we will write the rest of code required to perform the delete operation. Open the app.component.ts file and the below method,

/**
 *  Angular 2 CRUD application using Nodejs
 *  @autthor Shashank Tiwari
 */ 
deleteUser(userId: string) {
this.httpService.deleteUser({
userId: userId
})
.subscribe(
(response: DeleteUserResponse) => {
if (!response.error) {
const userIndex = this.usersList.findIndex((user => user.id === userId));
this.usersList.splice(userIndex, 1);
} else {
alert(response.message);
}
},
(error) => {
console.warn(error);
alert(`Unable to delete this User.`);
}
);
}

Explanation:

1. The first thing we will do is, consume thedeleteUser() method from HttpService. This will delete call the DELETE HTTP request, which will delete the user from the database.
2. Once response received from the server, we will remove the user from the userList property of the AppComponent class.

8. Updating an existing user (Creating a PUTHTTP Request)

=> Building this part involves the two important steps, First selecting and highlighting user from the rendered List. Then calling a function to update the select, which eventually make the UPDATE HTTP request.

=> I have divided this part into two small parts, In the first part we will select and highlight the clicked user from the list of the user. In the second part, we will make an UPDATE HTTP request.

1. Highlighting the user from the list

In this part, we will mainly do three things,

1. We will highlight the selected user from the list.
2. We will update Form fields based on user selected from the list.
3. Also, we will hide theAdd User button and we will show the Update Button.

=> We have a separate article forhighlighting a selected row in angular 2, I suggest you to read that article once if you don’t know how to do that. Open the app.component.html and replace the code for rendering the list view by this code,

app.component.html:

<!-- 
Angular 2 CRUD application using Nodejs
@autthor Shashank Tiwari
-->

<div class="users-list" *ngIf='usersList.length !== 0'>
<h3 class="user-list-heading">List of Users</h3>
<hr>
<div class="list-of-users">
<ul class="list-group">
<li *ngFor="let user of usersList" 
class="list-group-item" 
(click)="selectedUser(user)" 
[class.active]="isSelected(user)"
>
<span>{{ user.username}}</span>
<span class="deleteUsers" (click)="deleteUser(user.id)">X</span>
</li>
</ul>
</div>
</div>

Explanation:

In the above markup, the two highlighted lines are doing trick for us.

1. When we will click the list, the selectedUser() method will be triggred and this method will update the Form fields.
2. isSelected() return boolean and based on that class .active will be applied to the li.

=> Now let’s write code inside theAppComponentclass and the complete these features, Open theapp.component.tsfile and below property into it. The below property will hold the id of selected user from the list.

app.component.ts:

/**
 *  Angular 2 CRUD application using Nodejs
 *  @autthor Shashank Tiwari
 */
selectedUserId: string = null;

=> Now based on the above property we will show and hide the Update and Add User Button. So to do that, replace the Markup for the submit button by below markup.

=> In the below markup, the Buttons will hide/show based onselectedUserId property.

<!-- 
Angular 2 CRUD application using Nodejs
@autthor Shashank Tiwari
-->


<button type='submit' *ngIf='selectedUserId !== null' class="btn btn-primary form-submit-button" [disabled]="!userForm.valid">Update User</button>
<button type='submit' *ngIf='selectedUserId === null' class="btn btn-primary form-submit-button" [disabled]="!userForm.valid">Add User</button>

But to make this all happen, we have to write code inside the AppComponent class, Open theapp.component.tsfile add the two methods shown below,

app.component.ts:

/**
 *  Angular 2 CRUD application using Nodejs
 *  @autthor Shashank Tiwari
 */
selectedUser(user: User) {
this.selectedUserId = user.id;
this.userForm.controls['username'].setValue(user.username);
this.userForm.controls['email'].setValue(user.email);
this.userForm.controls['country'].setValue(user.country);
}

isSelected(user: User): boolean {
return this.selectedUserId === user.id ? true : false;
}

Explanation:

1. TheselectedUser() method will update selectedUserId property and it will update values of form controls as well.
2. isSelected() method will check if the selected user’s id equals to theselectedUserId property and based on this it returns a boolean value.

2. Making an HTTP request

=> Now the last piece of the puzzle is making HTTP calls to update the record in the database. When you will select any user from the list the update button will show up.

=> On the click of that button submit() method will get triggered, so we will add the code to make the HTTP request in that method only. Now Open the app.component.ts file and replace the code of submit() method by the below code,

app.component.ts:

/**
 *  Angular 2 CRUD application using Nodejs
 *  @autthor Shashank Tiwari
 */
submit() {
if (this.userForm.valid) {
if (this.selectedUserId !== null) {
this.updateUser();
} else {
this.addNewUser();
}
} else {
alert(`Enter all the user details`);
}
}

updateUser() {
this.httpService.updateUser({
userId: this.selectedUserId,
user: this.userForm.value
})
.subscribe(
(response: UpdateUserResponse) => {
if (!response.error) {
const userIndex = this.usersList.findIndex((user => user.id === this.selectedUserId));
this.usersList[userIndex]['username'] = this.userForm.controls['username'].value;
this.usersList[userIndex]['email'] = this.userForm.controls['email'].value;
this.usersList[userIndex]['country'] = this.userForm.controls['country'].value;
} else {
alert(response.message);
}
},
(error) => {
console.warn(error);
alert(`Unable to update the User`);
}
);
}

Explanation:

In the below code,

The first thing would be to call updateUser() oraddNewUser() based onselectedUserId property.

Then inside theupdateUser() method two things are happening first is we are making an HTTP call to update the record of user and second we will update the userList as well for that particular id.

Conclusion

In this article we understood, Angular 2 HTTP library and it’s methods and we created a basic CRUD application using Angular 2. If you have any questions or doubts let me know in below comment box, So that’s the end of this long article.

Also, If you find this article useful the do share with others.