Welcome folks today in this blog post we will be making a simple http
post request in angular 14 using the httpbin
api in browser using typescript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make the new angular
project using the below commands as shown below
ng new angularpproject
cd angularproject
And after that we need to go to app.module.ts
file of your angular project and copy paste the below code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { FormsModule } from '@angular/forms'; import {HttpClientModule} from '@angular/common/http' @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpClientModule, FormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
As you can see that we are importing the httpclientmodule
and the formsmodule
which are needed for making the http request and also for the forms as well. Just add the imports also.
Now guys we will go to app.component.html
file and add the necessary html code as shown below
app.component.html
1 2 3 |
<input type="text" [(ngModel)]="name" placeholder="Enter Name"> <button (click)="postData()">Post Data</button><br> You have successfully posted {{result}} |
As you can see guys in the above code we have the input
field out there in which we can enter the name
to make the post request to the httpbin.org api. And then we got the button to submit the form or post the data. And then we are showing the posted data inside the double curly brackets
.
And now we need to write the function once we click the post data
button. We need to define the postData()
function inside the app.component.ts
file of your angular project as shown below
app.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
import { HttpClient } from '@angular/common/http'; import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { name!:String; result!:String constructor(private http:HttpClient){} postData(){ let url = "http://httpbin.org/post" console.log(this.name) this.http.post(url,{ name:this.name, }).toPromise().then((data:any) => { console.log(data) console.log(JSON.stringify(data.json.name)) this.result = data.json.name }) } } |
As you can see guys we are importing the httpclient
module at the very top to make the http post request and then we are declaring some state variables the first one is the actual result and then we are declaring the variable for the name as well. And then inside the method we are declaring the url to which we will be making the post request and then we are using the post()
method of the httpclientmodule and then inside it we are passing the name to the httpbin.org server and this returns a promise and it contains the data and we are simply displaying the name which is posted on httpbin.org. If you open the browser you will see the below output as shown below