How to Make HTTP POST request in Angular 8,http post angularjs, http post angular 6 example, http post angular 4, http post angular 5, http post angular 2, http post angularjs example, http post angularjs, http post angularjs example with parameters, http post angularjs success error, http post angular 6, http post angular api, http post angular async, http post array angular, angular http post add header, angular http post access-control-allow-origin, angular http post application/x-www-form-urlencoded, angular http post application/json, angular http post arguments, angular http post await, http post body angular 2, http post body angular 5, http post without body angular, http post angular data, http post data angular 2, http post data angular 5, http post form data angular 6, http post json data angular, http post cross domain angular 2, http post return data angular, http post angular example, http post angular error, http post example angular 4, http post example angular 6, http post example angular 2, http post example angular 5, http post angular form, http post from angular, http post factory angular, http post form angular 6, http post finally angular, http post from angular 4, http post form angular 2, http post angular get response, http post and get angular 2, angular http post get response headers, angular http post get status code, angular http post get headers, angular http post get response code, angular http post get error message, angular http post get error, http post headers angular 4, http post headers angular 2, http post headers angular 5, http post set header angular, http post error handling angular, http post error handling angular 2, http post angular ionic, http post angular io, http post in angular 6, http post in angular 4, http post in angular 2, http post in angular 5, http post in angular 6 example, http post in angular 2 example, http post in angular 5 example, http post angularjs file upload

How to Make HTTP POST request in Angular 8

Read an External JSON file in Angular 8
How to integrate dyn email api in php
How to integrate dyn email api in laravel
How to upload image in Laravel 6
How to make a http get 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 use the XMLHttpRequest interface, which also supports old browsers. Angular 8 provide @angular/common/http package, to make HTTP POST requests using the POST method. Let’s start the tutorial with 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 which 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().

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.

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 posts the form data to the Rest API server.


<div class="containers">
<div class="row">
<div class="col-md-6">
<form #userRegForm='ngForm' (ngSubmit)="userRegForm.form.valid && RegisterUser(userRegForm.value)" novalidate>
<h2 class="text-center">Users Registration</h2>
  

<div class="form-group">
                  <input type="text" class="form-control" placeholder="User Name" name="name" [(ngModel)]="name" #username="ngModel" [ngClass]="{ 'is-invalid': userRegForm.submitted && username.invalid }" required>

<div *ngIf="userRegForm.submitted && username.invalid" class="invalid-feedback">
<div *ngIf="username.errors.required" class="alert-danger">Name is required</div>

</div>

</div>
<div class="form-group">
                  <input type="text" class="form-control" id="email" placeholder="email" name="email" [(ngModel)]="email" #youremail="ngModel" [ngClass]="{ 'is-invalid': userRegForm.submitted && youremail.invalid }" required> 

<div *ngIf="userRegForm.submitted && youremail.invalid" class="invalid-feedback">
<div *ngIf="youremail.errors.required" class="alert-danger">Email is required</div>

</div>

</div>
<div class="form-group">
                  <input type="text" class="form-control" id="password" placeholder="Password" name="password" [(ngModel)]="password" #pass="ngModel" [ngClass]="{ 'is-invalid': userRegForm.submitted && pass.invalid }" required>  

<div *ngIf="userRegForm.submitted && pass.invalid" class="invalid-feedback">
<div *ngIf="pass.errors.required" class="alert-danger">Password is required</div>

</div>

</div>
<div class="form-group">
                  <input type="text" class="form-control" id="conpassword" placeholder="Confirm Password" name="conpassword" [(ngModel)]="conpassword" #conpass="ngModel" [ngClass]="{ 'is-invalid': userRegForm.submitted && conpass.invalid }" required validateEqual='password'>  

<div *ngIf="userRegForm.submitted && conpass.invalid" class="invalid-feedback">
<div *ngIf="conpass.errors.required" class="alert-danger">Confirm Password is required</div>
<div *ngIf="conpass.errors.notEqual" class="alert-danger">Password does not match</div>

</div>

</div>
  

<div class="align-center">
                  <button type="submit" class="btn btn-default" id="registeruser"  >Register</button>
              </div>

</form>

</div>

</div>
</div>

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 app.component.ts file.

Import userdata service to your component

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


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 make a post request. Check your console to see response. See also
Check My New Project Gorillabow

ASK QUESTION

Post Created 36

Leave a Reply

Related Posts

Begin typing your search above and press enter to search. Press ESC to cancel.

Back To Top