Posting, Deleting, and Putting Data in Angular
Introduction
In this guide, we're going to look at using HttpClient in Angular to make HTTP requests.
Heire are the main topics that we're going to learn about in the next few minutes:
- Introduction to HTTP requests
- Using APIs to make an HTTP request
- Using HttpClient API to make an HTTP request
Introduction to HTTP requests
An HTTP request is a packet of information which is transferred from source to destination and termed as Client-Server respectively. A client makes the HTTP request, and the server sends the information to the client. HTTP has multiple request methods to make the request and error to indicate the error.
Here are some common HTTP request methods and response status codes.
HTTP Request Methods
- OPTIONS - This is used to check all metadata the server requires to ensure a secure request like CORS. It is called automatically before any HTTP request. You can read more about OPTIONS .
- GET - This is used to get data from the server.
- POST - This is used to send data to the server.
- PUT - This is used to update data.
- DELETE - This is used to delete data from the server.
Response Status Codes
- 200 - This is used to indicate the "OK" message when the HTTP request has completed successfully.
- 404 - This is used to indicate a "Resource NOT Found" message when HTTP doesn't find the specified URL at the server.
You can read more about HTTP Response codes and HTTP request methods .
Using APIs to Make an HTTP Request
There are two main types of APIs used to make an HTTP request.
- XMLHttpRequest(XHR)
- Fetch
Other libraries like Axios and HttpClient use one of the above internally and abstract the complexities around these APIs.
You can read more about XMLHttpRequest and Fetch.
Using HttpClient API to make an HTTP request
The HttpClient in @angular/common/http offers a simplified client HTTP API for Angular applications that rests on the XMLHttpRequest interface exposed by browsers.
Observable provides better performance over Promise. If you're not familiar with Observable, you can read more about Observable here.
To use the HttpClient in your project, you need to import HttpClient in app.module.ts. After importing, your app.module.ts file will look like following,:
1import { BrowserModule } from "@angular/platform-browser";
2import { HttpClientModule } from "@angular/common/http";
3
4import { NgModule } from "@angular/core";
5import { AppComponent } from "./app.component";
6
7@NgModule({
8 declarations: [AppComponent],
9 imports: [BrowserModule, HttpClientModule],
10 providers: [],
11 bootstrap: [AppComponent]
12})
13export class AppModule {}Then we need to make a service class where we will create the methods to make the HTTP request. You can make the service by using the following command:
1ng g s httpCrudDemo --skipTests=trueAs you can see, I have used --skipTests=true.
because Angular makes two files for service. One is for the business logic and one for unit testing. I'm not going to do any unit testing for now, so I'm skipping the test file.
We're not going to build Backend APIs for this guide; I'm going to use JSONPlaceholder, which is a free API that can test our frontend applications.
Before writing the methods to make the HTTP requests, we need to make the variable of the httpClient in the service class.
1constructor(private httpClient:HttpClient){}This will instantiate the httpClient so we can use it to make the HTTP requests.
It's best practice to divide the whole URL into two parts :
- Main URL like https://www.yourserver.com
- EndPoints like /users
So finally our service will look like this:
1import { Injectable } from '@angular/core';
2import { HttpClient } from '@angular/common/http';
3
4@Injectable({
5 providedIn: 'root'
6})
7export class HttpCrudDemoService {
8 url: string;
9
10constructor(private httpClient: HttpClient) {
11 this.url = "https://jsonplaceholder.typicode.com";
12}In the following section, I'm going to write the service methods to create, read, update, and delete the post.
Get All the Posts
1public getPosts(){
2 let endPoints=""
3 this.httpClient.get(this.url+endPoints).subscribe(data => {
4 console.log(data);
5 });
6}The GET method of the HTTP request fetches the data from the service and gives an array of objects. It takes only one parameter i.e., Backend Service URL. GET method will provide the data in JSON format that we need to convert in typescript object. But thanks to HTTPClient it converts the data from JSON to an observable form for us. To extract the data from the observable, we need to use the subscribe method of rxjs, which will give the data in a typescript/javascript object which we can use in any other function.
Get Post by ID
1public getPostById() {
2 let id: number = 1;
3 let endPoints = "/posts/" + id;
4 this.httpClient.get(this.url + endPoints).subscribe(data => {
5 console.log(data);
6 });
7}In the above function, I'm fetching the data for one specific ID. In this case, only one object is returned instead of an array of objects.
Add New Post
1public addPost(postData: Object) {
2 let endPoints = "/posts"
3 this.httpClient.post(this.url + endPoints, postData).subscribe(data => {
4 console.log(data);
5 });
6}The POST method is used for sending the data to the server. It takes two parameters, the service URL and the request body. In many cases, the servers send the ID of the object in response to confirm that your data has been processed by the server and the object has been created successfully.
Update the Post
1public updatePost(postData: Object) {
2 let endPoints = "/posts/1"
3 this.httpClient.put(this.url + endPoints, postData).subscribe(data => {
4 console.log(data);
5 });
6}The PUT method is used for updating an object which is already saved in the database. It also requires two parameters, first the URL and second request body. For updating the object, we need to pass the object ID in the URL as a route parameter.
Delete the Post
1public deletePost() {
2 let endPoints = "/posts/1"
3 this.httpClient.delete(this.url + endPoints).subscribe(data => {
4 console.log(data);
5 });
6}The DELETE method only requires the URL which has the ID of the object. It checks the ID and deletes the data from the database. But in a real-world application it soft deletes the data, meaning data is not be removed from the server permanently, it just gets inactivated, mainly for reporting purposes.
To make the HTTP request, you should always look for the headers because in many cases the server will only accept the request from an authorized client. In such cases an authorization or access token must be passed in the authorization header.
Conclusion
HttpClient is one of the best APIs to make HTTP requests. It returns an Observable, but if you want to return a Promise that can also be done using HttpClient. It is best practice to return an Observable and subscribe it in other functions.
That's it from this guide. I hope you are familiar with HttpClient now. Don't wait anymore—break the JSONPlaceholder servers.