Angular 2 CRUD application using Nodejs

http://www.codershood.info/2016/10/23/angular-2-crud-application-using-nodejs/

Angular 2 CRUD application using Nodejs

October 23, 2016 Shashank Tiwari Angular2, AngularJS

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.

For this article, I am not sharing the code for REST API, You will find REST API code into the .zip file When you will download the code.

The final outcome of this article shown below in Image.

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,

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

The application

Here,we will create 2 components. The first component is used to show the list of users and the second will be used to add new users as shown in below Image.

To create components in the Angular application is very easy with the help of Angular CLI. Below command is used to create a component,

ng generate component componentName

Run the below commands,

To create userList component run : ng generate component userList
To create AddUser component run : ng generate component AddUser

Basically, our application is comprised of three component userList,AddUser, and the default AppComponent.

Before going further let's take a look at app.module.ts.

app.module.ts:

/*
* Angular 2 CRUD application using Nodejs
* @autthor Shashank Tiwari
*/

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { UserListComponent } from './user-list/user-list.component';
import { AddUserComponent } from './add-user/add-user.component';

import { EmitterService } from './services/emitter.service';


@NgModule({
    declarations:[ AppComponent, UserListComponent, AddUserComponent ],
    imports:[ BrowserModule,FormsModule,HttpModule ],
    providers: [EmitterService],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

Angular 2 CRUD application using Nodejs

Till now we understood the application architecture and Angular 2 HTTP library. Now let's create angular 2 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 list and delete a user from the list.

In this application, we will show a list of the user based on below class. Create a file named as userModel.ts and write below code.
userModel.ts :

/*
* Angular 2 CRUD application using Nodejs
* @autthor Shashank Tiwari
*/

export class UserModel {
    constructor(
    	public _id: string,
		public name: string,
		public gender: string,
		public country: string
	) {}
}

Create folder named as services inside app folder. Now we will use angular cli to a create service file.Run the below command to create a service,

ng generate service http

http.service.ts:

/*
* Angular 2 CRUD application using Nodejs
* @autthor Shashank Tiwari
*/

import { Injectable } from '@angular/core';

import { Http, Response, Headers, RequestOptions } from '@angular/http';

import { UserModel } from '../userModel';

import {Observable} from 'rxjs/Rx';

// Import RxJs required methods
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';


@Injectable()
export class HttpService {

    private BASE_URL:string = 'http://localhost:8080/api/users/';

    constructor(
	        private http: Http
	) { }

	public getAllUser(){
		return this.http.get(`${this.BASE_URL}`)
			.map((res:Response) => res.json())
			.catch((error:any) => Observable.throw(error.json().error || 'Server error'));
	}

	public addUser(body:UserModel){
		let options = new RequestOptions({
        	headers: new Headers({ 'Content-Type': 'application/json;charset=UTF-8' }) 
        });
		return this.http.post(`${this.BASE_URL}`,JSON.stringify(body), options)
			.map((res:Response) => res.json())
			.catch((error:any) => Observable.throw(error.json().error || 'Server error'));
	}

	public updateUser(body:UserModel){

        let options = new RequestOptions({
        	headers: new Headers({ 'Content-Type': 'application/json;charset=UTF-8' }) 
        });

		return this.http.put(`${this.BASE_URL}${body['_id']}`,JSON.stringify(body), options)
			.map((res:Response) => res.json())
			.catch((error:any) => Observable.throw(error.json().error || 'Server error'));
	}

	public deleteUser(usersID:string){

        let options = new RequestOptions({
        	headers: new Headers({ 'Content-Type': 'application/json;charset=UTF-8' }) 
        });

		return this.http.delete(`${this.BASE_URL}${usersID}`,options)
			.map((res:Response) => res.json())
			.catch((error:any) => Observable.throw(error.json().error || 'Server error'));
	}

}

In the above code,

We have imported userModel and observable from RXJS library. Since we are using map and catch operator we'll have to import map and catch methods too. we have defined the BASE URL and injected the HTTP in the constructor method.

In the HTTP request, we are sending a request in JSON format encoded into UTF-8 Unicode and I believe the name of methods in above class specifies there job.

Getting list of users

Now our first step will be to get the list of users from the server. Our work will start from user-list.component.ts but before writing code into it, let's first take a look at app.component.html and app.component.ts.

app.component.ts :

/*
* Angular 2 CRUD application using Nodejs
* @autthor Shashank Tiwari
*/

import { Component } from '@angular/core';

import { UserListComponent } from './user-list/user-list.component';
import { AddUserComponent } from './add-user/add-user.component';

import { EmitterService } from './services/emitter.service';


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


export class AppComponent {

	public host_id: "HOST_COMPONENT";
	public title:string = 'Angular 2, Nodejs & MongoDB CRUD';

	private userInfo = 'CRUD_USER_INFO';
    private reset = 'CRUD_RESET_FORM';
    private userList = 'CRUD_USER_LIST';

	constructor(private _emitterService: EmitterService) {}
}

In the above code, We have imported EmitterService to pass data between siblings component. In the AppComponent class, we have three keys for EmitterService to pass data between siblings component.

app.component.html:

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

<div class="container">

    <h1 class="app-heading">
    	{{title}}
	</h1>

	<div class="row">

		<div class="col-md-7">
			<app-user-list [userInfo]="userInfo" [reset]="reset" [userList]="userList"></app-user-list>
		</div>
		<div class="col-md-5">
			<app-add-user [userInfo]="userInfo" [reset]="reset" [userList]="userList"></app-add-user>
		</div>

	</div>

</div>

Now open user-list.component.ts file write down below code. In the below code,

1. We are importing EmitterService and HttpService, to get data from other component and to call the HTTP request respectively. If you notice we have added HttpService as providers option in a component decorator.

2. Our UserListComponent implements OnInit, in this method we will load a list of users. So, basically, we will call getAllUser() of HttpService.

3. Rest of the code is to highlight a selected row from the list of users. We have a separate article for highlighting a selected row in angular 2, I suggest you to read that article once if you don't know how to do that.

user-list.component.ts:

/*
* Angular 2 CRUD application using Nodejs
* @autthor Shashank Tiwari
*/


import { Component, Input, OnInit,OnChanges } from '@angular/core';

import { HttpService } from '../services/http.service';
import { EmitterService } from '../services/emitter.service';

import { UserModel } from '../userModel';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css'],
  providers: [ HttpService ]
})
export class UserListComponent implements OnInit, OnChanges{

    @Input() reset: string;
    @Input() userInfo: string;
	@Input() userList: string;


	private usersList;
	private currentUser:UserModel;
	
    constructor(
			private httpService: HttpService
		) {}

	ngOnInit(){
		this.httpService.getAllUser().subscribe(
                       response => this.usersList = response.users,
                       error=>  { alert(`Can't get users.`); }
                    );
	}

	public userSelected(user){		
		this.currentUser = user;
	}

	public isSelected(user): boolean {
		if(!this.currentUser) {
			return false;
		}
		return this.currentUser._id ===  user._id ? true : false;
	}
}

Let's take a look at a markup, open user-list.component.html: write the below code.
user-list.component.html:

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


<h3 class="user-list-heading">List of Users</h3>
<hr>

<div class="list-users">
    <ul class="list-group">
    	<li *ngFor="let user of usersList" 
			class="list-group-item"
			(click)="userSelected(user)"
			[class.active]="isSelected(user)">
			{{ user.name}}
		</li>
	</ul>
</div>

Deleting a user

To delete a user from the list of users we'll have to again work in list.component.ts file. Basically, we will add a button to each row of the list to delete a particular user from the list.Let's take a look at user-list.component.html file.

In the below code,
1. When users click on X button we will call deleteUser() method of UserListComponent class.
2. In the deleteUser() method we will pass the _id of the user and based on this _id user will be deleted.

user-list.component.html :

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


<h3 class="user-list-heading">List of Users</h3>
<hr>

<div class="list-users">
    <ul class="list-group">
    	<li *ngFor="let user of usersList" 
			class="list-group-item"
			(click)="userSelected(user)"
			[class.active]="isSelected(user) && isReset">
			{{ user.name}}
			<div class="deleteUsers" (click)="deleteUser(user._id)">X</div>
		</li>
	</ul>
</div>

Time to add new user

Open add-user.component.html file and write the below code. In below the code,

1. We have two input tags and one select tag.

2. After that we have two buttons, one is for to add a new user and other is to reset the form.

3. When the user clicks on the add user button we will call the addUser() method of the AddUserComponent class.

add-user.component.html:

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

<h3 class="add-user-heading">Add/Upadte User </h3>
<hr>

<div class="form-group">
    Name : 
    <input class="form-control"
		type ="text"
		placeholder="Your name here."
		name= "name"
		[(ngModel)]="userModel.name">
</div>

<div class="form-group">
	Gender : 
	<select class="form-control" name="gender" [(ngModel)]="userModel.gender">
		<option value='m'> Male </option>
		<option value='f'> Female </option>
	</select>
</div>

<div class="form-group">
	Country : 
	<input class="form-control"
		type ="text"
		placeholder="Your Country here."
		name="country"
		[(ngModel)]="userModel.country">
</div>

<div class="form-group">
	<button class="btn btn-primary" (click)="addUser()">Add User</button> 
	<button  class="btn " (click)="resetAddUser()">Reset</button>
</div>

Now let's take a look at the add-user.component.ts file. In the below code,
1. Everything looks familiar till addUser() method, Here we are calling addUser() method of the httpService by passing the userModel which contains the data filled by users.

2. In the resetAddUser() function, we will make userModel empty.

3. We have one problem over here, how we will update the list of users ? Now technically question is how we will notify the user-list.component.ts that a new add is added to the list of users.

Well, here comes the EmitterService to the rescue. We will emit the updated list of users from addUser() method from AddUserComponent class. Let's take a look at it.

add-user.component.ts:

/*
* Angular 2 CRUD application using Nodejs
* @autthor Shashank Tiwari
*/


import { Component,Input, OnChanges } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { HttpService } from '../services/http.service';
import { EmitterService } from '../services/emitter.service';

import { UserModel } from '../userModel';

@Component({
  selector: 'app-add-user',
  templateUrl: './add-user.component.html',
  styleUrls: ['./add-user.component.css'],
  providers: [ HttpService ]
})
export class AddUserComponent implements OnChanges {

    @Input() userInfo: string;
    @Input() reset: string;
	@Input() userList: string;

	private userModel:UserModel = new UserModel('','','','');

	constructor(
			private httpService: HttpService
		) {}

	public addUser(){
		this.httpService.addUser(this.userModel).subscribe(
                        response =>  {
							if(response.error) { 
	                        	alert(`The user could not be added, server Error.`);
	                        } else {
	                        	EmitterService.get(this.userList).emit(response.users);
	                        }
                        },
                        error=> {
                       		alert(`The user could not be added, server Error.`);
                       	}
                    );
	}

	public resetAddUser(){
		this.userModel = new UserModel('','','','');
	}
}

But But But,

How list.component.ts suppose to get the updated list of users, Well solution is by using ngOnChanges() method.
Whenever any occurs in input property of the component, then ngOnChanges() method gets executed.

In the below code we are updating the list of users, by calling get() method on EmitterService.

user-list.component.ts:

/*
* Angular 2 CRUD application using Nodejs
* @autthor Shashank Tiwari
*/


import { Component, Input, OnInit,OnChanges } from '@angular/core';

import { HttpService } from '../services/http.service';
import { EmitterService } from '../services/emitter.service';

import { UserModel } from '../userModel';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css'],
  providers: [ HttpService ]
})
export class UserListComponent implements OnInit, OnChanges{

    @Input() reset: string;
    @Input() userInfo: string;
    @Input() userList: string;


	private usersList;
	private currentUser:UserModel;
	private isReset:boolean = true;


	constructor(
			private httpService: HttpService
		) {}

	ngOnInit(){
		this.httpService.getAllUser().subscribe(
                       response => this.usersList = response.users,
                       error=>  { alert(`Can't get users.`); }
                    );
	}

	public userSelected(user){		
		this.currentUser = user;
		EmitterService.get(this.userInfo).emit(this.currentUser);
		this.isReset = true;
	}

	public isSelected(user): boolean {
		if(!this.currentUser) {
			return false;
		}
		return this.currentUser._id ===  user._id ? true : false;
	}

	public deleteUser(userId:string){
		this.httpService.deleteUser(userId).subscribe(
						response => {
							if(response.error) { 
	                        	alert(`The user could not be deleted, server Error.`);
	                        } else {
	                        	this.usersList = response.users;
	                        }
                        },
                       error=> { 
                       		alert(`The user could not be deleted, server Error.`);
                       	}
                    );
	}
    
    ngOnChanges(changes:any) {

    	EmitterService.get(this.userList).subscribe( (userList:string) => {
			this.usersList = userList;
		});
	}
}

Updating an existing user

So the idea is to update the details of a user, whenever a row of the list is gets selected. In order to do that, we have to pass the details of the user from user-list.component to add-user.component just like we did above. So let's start,

Open the user-list.component.ts replace the below code.

user-list.component.ts:

/*
* Angular 2 CRUD application using Nodejs
* @autthor Shashank Tiwari
*/


import { Component, Input, OnInit,OnChanges } from '@angular/core';

import { HttpService } from '../services/http.service';
import { EmitterService } from '../services/emitter.service';

import { UserModel } from '../userModel';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css'],
  providers: [ HttpService ]
})
export class UserListComponent implements OnInit, OnChanges{

    @Input() reset: string;
    @Input() userInfo: string;
	@Input() userList: string;


	private usersList;
	private currentUser:UserModel;
	private isReset:boolean = true;


	constructor(
			private httpService: HttpService
		) {}

	ngOnInit(){
		this.httpService.getAllUser().subscribe(
                       response => this.usersList = response.users,
                       error=>  { alert(`Can't get users.`); }
                    );
	}

	public userSelected(user){		
		this.currentUser = user;
		EmitterService.get(this.userInfo).emit(this.currentUser);
		this.isReset = true;
	}

	public isSelected(user): boolean {
		if(!this.currentUser) {
			return false;
		}
		return this.currentUser._id ===  user._id ? true : false;
	}

	public deleteUser(userId:string){
		this.httpService.deleteUser(userId).subscribe(
						response => {
							if(response.error) { 
	                        	alert(`The user could not be deleted, server Error.`);
	                        } else {
	                        	this.usersList = response.users;
	                        }
                        },
                       error=> { 
                       		alert(`The user could not be deleted, server Error.`);
                       	}
                    );
	}

	ngOnChanges(changes:any) {

		EmitterService.get(this.reset).subscribe( (reset:string) => {
			this.isReset = false;
		});


		EmitterService.get(this.userList).subscribe( (userList:string) => {
			this.usersList = userList;
		});
	}
}

In the above code,

1. We will emit the selected user's information in userSelected() method, which will be caught by add-user.component component.

2. If you notice we have one more incoming data from add-user.component component inside ngOnChanges() method. That will be used to clear all the selection from the list of users, Whenever Reset button from add-user.component component gets clicked.

Now let's add update button into add-user.component.html, In the below code, There are two buttons actually but one can be displayed at a time and the other hidden. So here is the final code for add-user.component.html.

add-user.component.html :

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

<h3 class="add-user-heading">Add/Upadte User </h3>
<hr>

<div class="form-group">
    Name : 
    <input class="form-control"
		type ="text"
		placeholder="Your name here."
		name= "name"
		[(ngModel)]="userModel.name">
</div>

<div class="form-group">
	Gender : 
	<select class="form-control" name="gender" [(ngModel)]="userModel.gender">
		<option value='m'> Male </option>
		<option value='f'> Female </option>
	</select>
</div>

<div class="form-group">
	Country : 
	<input class="form-control"
		type ="text"
		placeholder="Your Country here."
		name="country"
		[(ngModel)]="userModel.country">
</div>

<div class="form-group">
	<button *ngIf="isInsert" class="btn btn-primary" (click)="addUser()">Add User</button> 
    <button  *ngIf="!isInsert" class="btn btn-primary" (click)="updateUser()">Update</button>
	<button  class="btn " (click)="resetAddUser()">Reset</button>
</div>

The below code is final code for the add-user.component.ts file. In the below code,

1. Whenever any change occurs in userInfo input property (means whenever the new row selected in the list of users) the update button will be shown instead of the add new user button.

2. On the click of update button we will call updateUser() method, which will make HTTP request by calling updateUser() method from HttpService.

3. Lastly on the click of the reset button, we are emitting the reset as true just to clear the selection of rows in user-list.component file.

add-user.component.ts :

/*
* Angular 2 CRUD application using Nodejs
* @autthor Shashank Tiwari
*/


import { Component,Input, OnChanges } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { HttpService } from '../services/http.service';
import { EmitterService } from '../services/emitter.service';

import { UserModel } from '../userModel';

@Component({
  selector: 'app-add-user',
  templateUrl: './add-user.component.html',
  styleUrls: ['./add-user.component.css'],
  providers: [ HttpService ]
})
export class AddUserComponent implements OnChanges {

    @Input() userInfo: string;
    @Input() reset: string;
	@Input() userList: string;

	private isInsert:boolean = true;
	private userModel:UserModel = new UserModel('','','','');

	constructor(
			private httpService: HttpService
		) {}

	public addUser(){
		this.httpService.addUser(this.userModel).subscribe(
                        response =>  {
							if(response.error) { 
	                        	alert(`The user could not be added, server Error.`);
	                        } else {
	                        	EmitterService.get(this.userList).emit(response.users);
	                        }
                        },
                        error=> {
                       		alert(`The user could not be added, server Error.`);
                       	}
                    );
	}

	public updateUser(){
		this.httpService.updateUser(this.userModel).subscribe(
						response => {
							if(response.error) { 
	                        	alert(`The user could not be updated, server Error.`);
	                        } else {
	                        	EmitterService.get(this.userList).emit(response.users);
	                        }
                        },
                        error=> { 
                        	alert(`The user could not be updated, server Error.`);
                        }
                    );
	}

	public resetAddUser(){
		this.userModel = new UserModel('','','','');
		EmitterService.get(this.reset).emit(true);
		this.isInsert = true;
	}

	ngOnChanges(changes:any) {
		
		EmitterService.get(this.userInfo).subscribe( (value:UserModel) => {
			this.userModel = new UserModel(value._id,value.name,value.gender,value.country);
			this.isInsert = false;
		});
	}
}