How to Make HTTP POST request in Angular 8

How to Make HTTP POST request in Angular 8.

In this angular 8 tutorial, we are going to learn how to send POST requests to REST API servers in your Angular 8 application using Httplient, Angular services and models. We need the HTTP POST method for many uses but mainly used to add new data on the rest api servers.

Angular 8 HttpClient uses the XMLHttpRequest interface, which also supports old browsers. Angular 8 provides @angular/common/http package, to make HTTP POST requests using the POST method. Let’s start the tutorial with a code example.

We need to set following things before making HTTP POST request

API ENDPOINT: This is HTTP endpoint URL using where we post data to the server.

Body: This is the data object that we need to post to the server.

Headers: We need to set request header for our HTTP POST Request.

Options: This parameter is optional. Here we pass the object of RequestOptionsArgs that uses headers.

Observable: This is the response type of Http.post().

The followings are the perfect steps to make an HTTP POST request in angular8 js. In this angular 8 HTTP POST Request tutorial, we will use the default app component. Let’s start with code examples.

How to Make HTTP POST request in Angular 14

Import HttpClientModule in your app.module.ts file

import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
---------
  imports: [     
    BrowserModule,
	HttpClientModule
  ]
---------
});

Create a Registration Form In Your Component HTML File

In this example, We will post the form data to the Rest API server.

  
  
  
      
  
          
  
               
Users Registration
  
              
  
              
  
                  

                   

                      
Name is required
                   
   
              
    
              
  
                   

                 

                    
Email is required
                 
 
              
  

              
  
                    

                  

                    
Password is required
                 
 
              
 
              
  
                    

                  

                    
Confirm Password is required
                    
Password does not match
                 
 

              

              
  
              
  
                  Register  
              
  
          
  
      
  
  
  

How to Make HTTP POST request in Angular 14

Make A Angular Service For Your Component

When we used HttpClient post() method directly in our component, it is against the separations of the coding rule and coding standard. To retain coding standard we used angular services. Now we have to recreate our code to use an Angular service. In Angular service we make HTTP POST requests then Angular service returns the result back to our component.

So let’s create a new service:-

$ ng generate service userdata 

Now import the httpclient module in userdata.service.ts File. Next, define the base URL of the rest API server and create a function for user registration.

import { Injectable } from '@angular/core';
import { HttpClient,HttpHeaders } from '@angular/common/http';
import 'rxjs/add/operator/map'

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

  baseUrl:string = "https://reqres.in/api/users";

 constructor(private httpClient : HttpClient) { }

public registerUsers(obj){
	
     return this.httpClient.post(this.baseUrl,obj, {
     	headers: new HttpHeaders({
            'Content-Type':  'application/json',

          })
     }).map(data=>
	  	data);
 }
}

We will pass the form data object which we will get from the app.component.ts file.

Import userdata service to your component

In the next step import the above-created service to your app.component.ts file. Add a private user data parameter of type user data to the constructor. Also, create the function which you have declared in your form then pass the data to the service which you have created above. See in below code snippet:-

How to Make HTTP POST request in Angular 14

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

import { FormGroup, FormControl } from '@angular/forms';

import { DataService } from '../data.service';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'myapp';

  constructor(private userdataService: userdataService) { }

  ngOnInit() {
  }

  RegisterUser(userdata){ 

    console.log(userdata);

    // User data which we have received from the registration form.

    this.userdataService.registerUsers(userdata).subscribe((reponse)=>{
      console.log(reponse);
     }); 

  }


}

You have successfully made a post request. Check your console to see the response. See also
How to Make HTTP POST request in Angular 14

BUY THIS DOMAIN Abbajaan.com How to Make HTTP POST request in Angular 8.

ASK QUESTION