React Native Tabs in Single File and Split Files
React Native List with Grid consisting of Icons and Text
React Native Cart System
React Native Wizard Stepper
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
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.
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.