In this tutorial we’ll see how to communicate with a back end service using the Angular HttpClient. As an example we’ll take a Spring Boot REST API crud application as a back end service and connect to it from an Angular front end application using the Angular HttpClient.
In this post stress is more on explaining how to use Angular client HTTP API, how to make a request to back end service and how to catch errors.
Back end Spring Boot service
In the Spring Boot application we have a Rest Controller class with handler mappings for different CRUD operations. DB used is MySQL and the DB table is User.
To get more details and code for the Spring Boot CRUD application, refer this post- Spring Boot REST API CRUD Example With Spring Data JPA
Only change that is required in the Spring boot application is to add @CrossOrigin annotation in the Controller class to enable cross-origin resource sharing (CORS). If you won't use this annotation cross browser HTTP request won't be allowed and the Spring Boot application won't accept any request coming from http://localhost:4200
@RestController
@CrossOrigin(origins="http://localhost:4200")
@RequestMapping("/user")
public class UserController {
@Autowired
UserService userService;
// Insert user record
@PostMapping
@ResponseStatus(HttpStatus.CREATED)
public User addEmployee(@RequestBody User user) {
return userService.addUser(user);
}
// Fetch all user records
@GetMapping
public List<User> getAllUsers(){
return userService.getAllUsers();
}
// Fetch single user
@GetMapping("/{id}")
public User getUserById(@PathVariable("id") int userId){
return userService.getUserById(userId);
}
// Update user record
@PutMapping("/updateuser")
public ResponseEntity<String> updateUser(@RequestBody User user) {
try {
userService.updateUser(user);
return new ResponseEntity<String>(HttpStatus.OK);
}catch(NoSuchElementException ex){
// log the error message
System.out.println(ex.getMessage());
return new ResponseEntity<String>(HttpStatus.NOT_FOUND);
}
}
// Delete user record
@DeleteMapping("/{id}")
public ResponseEntity<String> deleteUser(@PathVariable int id){
try {
userService.deleteUserById(id);
return new ResponseEntity<String>(HttpStatus.OK);
}catch(RuntimeException ex){
// log the error message
System.out.println(ex.getMessage());
return new ResponseEntity<String>(HttpStatus.NOT_FOUND);
}
}
}
Angular application
Using Angular we have to create front end to provide user with functionality to-
- Add new user
- Delete user by passing Id
- Update user record
- Display all user records
While displaying users, in that table itself we’ll have a column with buttons to update or delete specific record.
1. Model class
In the front end application we’ll need a model class with the fields that map with the fields of the User entity class in the Spring Boot application.
user.model.ts
export class User {
userId: number;
firstName: String;
lastName: String;
userType: String
startDate: Date;
}
2. Add required modules in app.module.ts
In the application we’ll be having routing so we’ll import a routing file, there are forms to be created so we’ll import ReactiveFormsModule and HttpClientModule in order to perform http requests.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule} from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AddUserComponent } from './users/adduser/adduser.component';
import { DeleteUserComponent } from './users/deleteuser/deleteuser.component';
import { AllUsersComponent } from './users/allusers/allusers.component';
@NgModule({
declarations: [
AppComponent,
AddUserComponent,
DeleteUserComponent,
AllUsersComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
AppRoutingModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Here AddUserComponent, DeleteUserComponent, AllUsersComponent are component classes that will be created for adding, deleting and displaying user respectively.
3. App routing module
Routing module which maps path to the component.
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AddUserComponent } from './users/adduser/adduser.component';
import { AllUsersComponent } from './users/allusers/allusers.component';
import { DeleteUserComponent } from './users/deleteuser/deleteuser.component';
const routes: Routes = [
{path: 'adduser', component: AddUserComponent},
{path: 'deleteuser', component: DeleteUserComponent},
{path: 'displayusers', component: AllUsersComponent},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule { }
4. Root Component (app.component.ts)
This component is the starting point and used to point to the template that creates menu giving option to add and delete user. Note that Bootstrap classes are used for styling the menu.
Refer this post to know how to add Bootstrap to Angular application- How to Add Bootstrap to Angular Application
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
app.component.html
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="nav navbar-nav">
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/home">Home</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/adduser">Add User</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/deleteuser">Delete User</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/displayusers">Display Users</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row"><p></p></div>
<div class="row">
<div class="col-md-12">
<router-outlet></router-outlet>
</div>
</div>
</div>
<div>
5. Service class (user.service.ts)
Functionality to send a request and accept response is encapsulated in a Service class.
import { User } from '../users/user.model';
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
@Injectable({
providedIn: 'root',
})
export class UserService {
private baseUrl = 'http://localhost:8080/user';
constructor(private http: HttpClient){}
addUser(user: User): Observable<User>{
return this.http.post<User>(this.baseUrl, user);
}
deleteUser(id: number):Observable<{}>{
return this.http.delete(`${this.baseUrl}/${id}`)
.pipe(catchError(this.handleError));
}
updateUser(user: User){
return this.http.put(`${this.baseUrl}/updateuser`, user)
.pipe(catchError(this.handleError));
}
getAllUsers(){
return this.http.get<User[]>(this.baseUrl)
.pipe(catchError(this.handleError));
}
getUserById(id: number){
return this.http.get<User>(`${this.baseUrl}/${id}`)
.pipe(catchError(this.handleError));
}
private handleError(httpError: HttpErrorResponse) {
if (httpError.error instanceof ErrorEvent) {
// A client-side or network error occurred. Handle it accordingly.
console.error('An error occurred:', httpError.error.message);
} else {
// The backend returned an unsuccessful response code.
// The response body may contain clues as to what went wrong.
console.error(
`Backend returned code ${httpError.status}, ` +
`body was: ${httpError.error}`);
}
// Return an observable with a user-facing error message.
return throwError('Something bad happened; please try again later.');
}
}
Important points to note here are-
- Service class uses HttpClient class which has methods to perform HTTP requests. HttpClient supports HTTP methods such as PUT, POST, and DELETE, which you can use to modify the remote data and get method to fetch data from a server. Instance of HttpClient is injected in Service class.
- We are making a request to the UserController in the Spring Boot application which handles any request having path as user so the base url is assigned as 'http://localhost:8080/user'
- In the service class there is addUser() method to insert a User, deleteUser() method to delete user record, updateUser() method to update a user and getAllUsers() method to get all user records.
- In addUser() method http.post() method is used which takes 3 parameters-
- resource URL
- body - The data to POST in the body of the request.
- options - An object containing method options
- addUser() method takes User object as an argument which is then passed as the body of the request through the post method.
- In the deleteUser() method http.delete() method is used where user id is also passed in the request URL. This corresponds to the deleteUser() method of the Controller class in the Spring Boot application where DeleteMapping with id as PathVariable is used.
- Same way in the updateUser() http.put() method is used and for getting user record http.get() method is used.
- All the HttpClient methods get, put, post, delete return an Observable and you must subscribe to this Observable.
- You must call subscribe() or nothing happens. Actual Request operation is initiated only when you subscribe to the returned Observable. You can subscribe with in the Service class when the method is called or return and subscribe in the Component class. In our example From Service class Observable is returned and the subscription is done in Component classes.
- If the request fails on the server, HttpClient returns an error object instead of a successful response.Two types of errors can occur.
- The server backend might reject the request, returning an HTTP response with a status code such as 404 or 500. These are error responses.
- Something could go wrong on the client-side such as a network error that prevents the request from completing successfully or an exception thrown in an RxJS operator. These errors produce JavaScript ErrorEvent objects.
- handleError() method in the Service class is used to check the returned error. Error handler also returns an RxJS ErrorObservable with a user-friendly error message.
- Delete methos uses a pipe to send all observables returned by the HttpClient.delete() call to the error handler.
- In subscribe you can have a second argument which is a function that triggers whenever an error is thrown. In the component classes you will see how that is used to handle errors.
6. Adding new user
For adding a new user there is adduser.component.ts class.
import { Component, OnInit} from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { DatePipe } from '@angular/common';
import { User } from '../user.model';
import { UserService } from 'src/app/services/user.service';
@Component({
selector: 'app-adduser',
templateUrl: './adduser.component.html',
styleUrls: ['./adduser.component.css'],
providers: [DatePipe]
})
export class AddUserComponent implements OnInit{
user: User = new User();
isAdded = false;
constructor(private userService: UserService, private datePipe: DatePipe){}
userTypes = ['Silver', 'Gold', 'Platinum'];
currentDate = new Date();
userForm: FormGroup;
ngOnInit() {
this.userForm = new FormGroup({
firstName: new FormControl('', [Validators.required, Validators.minLength(5)]),
lastName: new FormControl('', [Validators.required, Validators.minLength(3)]),
userType: new FormControl(),
startDate: new FormControl(this.datePipe.transform(this.currentDate, 'yyyy-MM-dd'))
});
}
onSubmit(){
this.user.firstName = this.userForm.value.firstName;
this.user.lastName = this.userForm.value.lastName;
this.user.userType = this.userForm.value.userType;
this.user.startDate = this.userForm.value.startDate;
this.save();
}
save(){
this.userService.addUser(this.user)
.subscribe(user=> {console.log(user);
this.isAdded = true;
}, error=>console.log(error))
}
resetUserForm(){
this.isAdded = false;
this.userForm.reset();
}
}
Important points to note here are-
- Instances of UserService class and DatePipe are injected in this component.
- DatePipe is used to transform the date to the required format.
- Angular Reactive form is used here so FormGroup and the FormControls are created with in the component.
- With in the FormControls, Validators are also provided.
- userTypes array is used to provide options for the user type dropdown in the form.
- Start date field is pre-filled with the current date.
- On submitting the form a user object is created from the entered values and then save function is called. From the save function addUser(0 method of the UserService class is called.
- You also subscribe to the returned Observable. With in the subscribe first argument is a function that logs the added user to the console and set isAdded to true, second argument is a function to log the error.
Template(adduser.component.html)
<div class="row">
<div class="col-sm-6, col-md-6">
<h2>User Registration</h2>
<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName"
formControlName="firstName">
<div class="alert alert-danger" *ngIf="userForm.get('firstName').invalid
&& userForm.get('firstName').touched">
<div *ngIf="userForm.get('firstName').errors.required">
First Name is required.
</div>
<div *ngIf="userForm.get('firstName').errors.minlength">
First Name must be at least 5 characters long.
</div>
</div>
</div>
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName"
formControlName="lastName">
<div class="alert alert-danger" *ngIf="userForm.get('lastName').invalid
&& userForm.get('lastName').touched">
<div *ngIf="userForm.get('lastName').errors.required">
Last Name is required.
</div>
<div *ngIf="userForm.get('lastName').errors.minlength">
Last Name must be at least 3 characters long.
</div>
</div>
</div>
<div class="form-group">
<label for="startDate">Start Date</label>
<input type="date" class="form-control" id="startDate"
formControlName="startDate">
</div>
<div class="form-group">
<label for="userType">User Type</label>
<select class="form-control" id="userType"
formControlName="userType">
<option *ngFor="let type of userTypes" [value]="type">{{type}}</option>
</select>
</div>
<button type="submit" [disabled]="userForm.invalid" class="btn btn-success">Submit</button>
</form>
<div class="row">
<div class="col-sm-6, col-md-6">
<div class="alert alert-info" *ngIf=isAdded>
<p>User Added SuccessFully!</p>
<button class="btn btn-primary" (click)="resetUserForm()">Add another user</button>
</div>
</div>
</div>
</div>
</div>
After adding-
7. Deleting a user
For deleting a user there is a separate screen too where user can enter Id of the user to be deleted. Class for it is deleteuser.component.ts class.
import { Component, OnInit } from "@angular/core";
import { FormControl, FormGroup, Validators } from "@angular/forms";
import { UserService } from "src/app/services/user.service";
@Component({
selector: 'app-deleteuser',
templateUrl: './deleteuser.component.html'
})
export class DeleteUserComponent implements OnInit{
userDeleteForm: FormGroup;
errorMsg = null;
constructor(private userService: UserService){}
ngOnInit(): void {
this.userDeleteForm = new FormGroup({
userId: new FormControl('', Validators.required),
});
}
onSubmit(){
this.errorMsg = null;
this.userService.deleteUser(+this.userDeleteForm.value.userId)
.subscribe(user=> console.log(user), error=>{
this.errorMsg = error
});
}
}
Important points to note here are-
- In the onSubmit() function deleteUser() method of the Service class is called. UserId is passed here after converting it to number.
- You also subscribe to the returned Observable which is mandatory to initiate the request. With in the subscribe first argument is a function that logs the user to the console, second argument is a function to handle the error.
- For delete we used catchError and an error handler method to return an error message. In the second argument of the subscribe that error message is assigned to the field errorMsg of the Component.
Template (deleteuser.component.html)
<div class="row">
<div class="col-sm-6, col-md-6">
<h2>Delete User</h2>
<form [formGroup]="userDeleteForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="userId">Enter Id to be deleted</label>
<input type="text" class="form-control" id="userId"
formControlName="userId">
<div class="alert alert-danger" *ngIf="userDeleteForm.get('userId').invalid
&& userDeleteForm.get('userId').touched">
Please enter a valid Id
</div>
</div>
<button type="submit" [disabled]="userDeleteForm.invalid" class="btn btn-success">Submit</button>
</form>
</div>
</div>
<div class="row">
<div class="col-sm-6, col-md-6">
<div class="alert alert-danger" *ngIf="errorMsg">
<p>{{ errorMsg }}</p>
</div>
</div>
</div>
With error message
8. Displaying a User
This component displays all the user records in a table with an additional column having delete and update buttons to delete or update specific record.
Clicking on update button opens a Modal dialogue box with the values for the specific user record which can then be updated.
allusers.component.ts
import { DatePipe } from "@angular/common";
import { Component, OnInit, ViewChild } from "@angular/core";
import { FormControl, FormGroup, Validators } from "@angular/forms";
import { forkJoin, Observable } from "rxjs";
import { UserService } from "src/app/services/user.service";
import { User } from "../user.model";
@Component({
selector: 'app-allusers',
templateUrl: './allusers.component.html',
providers: [DatePipe]
})
export class AllUsersComponent implements OnInit{
users: User[];
user: User;
deleteMsg:string = "";
userTypes = ['Silver', 'Gold', 'Platinum'];
@ViewChild('closebutton') closebutton;
constructor(private userService: UserService, private datePipe: DatePipe){}
ngOnInit(): void {
console.log('All users ')
this.userService.getAllUsers().subscribe(data =>{
console.log(data);
this.users = data;
})
}
onClickDelete(userId: number){
this.userService.deleteUser(userId)
.subscribe(responseData=> {
this.deleteMsg = 'Successfully deleted';
// get user records after deletion
this.userService.getAllUsers().subscribe(data =>{
console.log(data);
this.users = data;
})
}, error=>{
this.deleteMsg = error
});
}
userUpdateForm = new FormGroup({
id: new FormControl({value:'', disabled:true}),
firstName: new FormControl('', [Validators.required, Validators.minLength(5)]),
lastName: new FormControl('', [Validators.required, Validators.minLength(3)]),
userType: new FormControl(''),
startDate: new FormControl('')
});
onClickUpdate(userId: number){
// Get user data for the selected user
this.userService.getUserById(userId)
.subscribe(responseData=> {
this.user = responseData;
console.log(this.user);
this.prepareUpdateForm();
});
}
// Use setValue() method to set the values
// for selected user record
prepareUpdateForm(){
this.userUpdateForm.setValue({
id:this.user.userId,
firstName:this.user.firstName,
lastName:this.user.lastName,
userType:this.user.userType,
startDate:this.datePipe.transform(this.user.startDate, 'yyyy-MM-dd')
});
}
onSubmit(){
let user = new User();
// To get data from a disabled input element
user.userId = this.userUpdateForm.getRawValue().id;
user.firstName = this.userUpdateForm.value.firstName;
user.lastName = this.userUpdateForm.value.lastName;
user.userType = this.userUpdateForm.value.userType;
user.startDate = this.userUpdateForm.value.startDate;
//console.log("USER for update"+ user.userId);
this.userService.updateUser(user).subscribe(responseDate=>{
// to close the modal
this.closebutton.nativeElement.click();
// Get the updated list
this.userService.getAllUsers().subscribe(data =>{
//console.log(data);
this.users = data;
})
},
error=> console.log(error));
}
}
Important points to note here are-
- In the ngOnInit() method getAllUsers() method of the UserService is called to get all users which are then displayed using the template.
- In this typescript class there is a method onClickDelete() which is called when delete button is clicked. From the method deleteUser(userId) method of the UserService class is called to delete a user.
- onClickUpdate(userId: number) method is called when the update button is clicked. From there getUserById() method of the UserService is called to get the values for the specifc user which is used to populate the user record in modal dialogue box.
- Angular reactive form is created to show in a modal dialogue box, on submitting this form onSubmit() method is called which calls updateUser(user) method of the UserService class to update the user.
allusers.component.html
<!-- For displaying all users in a tables-->
<div class="row" *ngIf="deleteMsg !== ''">
<div class="alert alert-info alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
{{deleteMsg}}
</div>
</div>
<div class="row">
<h2>User Details</h2>
<table class="table table-sm table-bordered table-striped">
<thead>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>User Type</th>
<th>Start Date</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users">
<td>{{user.userId}}</td>
<td>{{user.firstName}}</td>
<td>{{user.lastName}}</td>
<td>{{user.userType}}</td>
<td>{{user.startDate | date:'dd/MM/yyyy'}}</td>
<td>
<button class="btn btn-success btn-sm" (click)="onClickUpdate(user.userId)"
data-toggle="modal" data-target="#updateModal">Update</button>
<button class="btn btn-danger btn-sm ml-3" (click)="onClickDelete(user.userId)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- To show a modal box to update a record-->
<div class="modal" id="updateModal" data-backdrop="static" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Update User</h5>
<button type="button" class="close" #closebutton data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form class="form-sm" [formGroup]="userUpdateForm" (ngSubmit)="onSubmit()">
<div class="modal-body">
<div class="form-group">
<label for="id">User ID</label>
<input type="text" class="form-control" id="id"
formControlName="id">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName"
formControlName="firstName">
<div class="alert alert-danger" *ngIf="userUpdateForm.get('firstName').invalid
&& userUpdateForm.get('firstName').touched">
<div *ngIf="userUpdateForm.get('firstName').errors.required">
First Name is required.
</div>
<div *ngIf="userUpdateForm.get('firstName').errors.minlength">
First Name must be at least 5 characters long.
</div>
</div>
</div>
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName"
formControlName="lastName">
<div class="alert alert-danger" *ngIf="userUpdateForm.get('lastName').invalid
&& userUpdateForm.get('lastName').touched">
<div *ngIf="userUpdateForm.get('lastName').errors.required">
Last Name is required.
</div>
<div *ngIf="userUpdateForm.get('lastName').errors.minlength">
Last Name must be at least 3 characters long.
</div>
</div>
</div>
<div class="form-group">
<label for="startDate">Start Date</label>
<input type="date" class="form-control" id="startDate"
formControlName="startDate">
</div>
<div class="form-group">
<label for="userType">User Type</label>
<select class="form-control" id="userType"
formControlName="userType">
<option *ngFor="let type of userTypes" [value]="type">{{type}}</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Update</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
- In the template first div section is used to display a message when user is successfully deleted.
- Second div section is used to display all user records in a table.
- Third div section is used to create a modal dialogue box that shows a form to update user record.
9. CSS class
There is also a CSS class to show a green or red border along with the form fields to signify a required field and a field having some error.
src/assets/forms.css
.ng-invalid.ng-untouched:not(form) {
border-left: 5px solid #42A948; /* green */
}
.ng-invalid.ng-touched:not(form) {
border-left: 5px solid #a94442; /* red */
}
In the index.html file, update the <head> tag to include the new style sheet.
<link rel="stylesheet" href="assets/forms.css">
Source code from GitHub- https://github.com/netjs/angular-springboot-crud-app
That's all for this topic Angular HttpClient + Spring Boot REST API CRUD Backend Service. If you have any doubt or any suggestions to make please drop a comment. Thanks!
Related Topics
You may also like-
Hi. Thanks for this tutorial, but modal dialog box for update doesn't work. Please help.
ReplyDeletei agree. modal dialog box for update doesnt work
Delete