Understanding of Angular 8 HTTP requests

Covers four fundamental Angular HttpClient’s methods — get, post, put and delete.

Pavan Chilukuri
Sep 28, 2018 · 3 min read

The below simple UI reads a list of users from the server (json-server run locally) which hosts the mock json data. Also, this application enables you to post the details of user to the server, delete user from the table, and select a user to edit the user name.

Application UI

Image for post
Image for post

You can refer to my project repository for the source code. I used JSON Server to host mock json data locally.


Why Service?

GET
HttpClient.get() method returns an Observable and lets you read the data from the server.

getUsers(): Observable<User> {
return this.http.get<User>(this.url);
}

POST
We must send a user object to server to post the user details. Hence, HttpClient.post() takes an argument user along with the url where the request body is to be sent and the headers (httpOptions)

postUsers(user): Observable<User> {
return this.http.post<User>(this.url, user, this.httpOptions);
}

PUT
This method is almost similar to post(). I’m updating a user record based on the id field. Hence, a new url is to be constructed based on userId so that no other objects are disturbed.

updateUser(userId, user): Observable<User> {
const putUrl = this.url + '/' + userId;
return this.http.put<User>(putUrl, user, this.httpOptions);
}

DELETE
I’m deleting a user object by capturing the userId. So, construct a new url which deletes the specific user based on the id.

deleteUser(userId): Observable<{}> {
const deleteUrl = this.url + '/' + userId;
return this.http.delete(deleteUrl, this.httpOptions);
}

Services are available throughout the application to any Components. To make our services available to Component classes, we just need to inject services in the constructors as shown below.

import { Component, OnInit} from '@angular/core';
import { UserService } from '../user.service';

@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

constructor(private userService: UserService) { }
}

A note which is to be worth remembered.

Always subscribe!
An
HttpClient method does not begin its HTTP request until you call subscribe()on the observable returned by that method. This is true for all HttpClient methods.

Therefore, we do not get any result unless we subscribe to the data that is returned from the server.

this.userService.getUsers().subscribe((observer) => {
this.usersList = observer;
});

Now that we have subscribed, the response is assigned to usersList. In the template, make use of this data to present on the UI.

<tr *ngFor="let user of usersList">
<td>{{user.name}}</td>
<td>{{user.job}}</td>
<td>{{user.location}}</td>
</tr>

Similarly, for the other methods — post(), put(), and delete() we follow the same pattern making use of the subscribe() method to reflect the change. Please feel free to refer my project repository for the source code.



I appreciate your time reading my first post. Please leave your suggestions or advice if any as a comment. Thank you!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store