Angular 14 HttpBin API Example to Make HTTP POST Request & Display Data in Browser Using TypeScript

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

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 { }

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

<input type="text" [(ngModel)]="name" placeholder="Enter Name">
<button (click)="postData()">Post Data</button><br>
You have successfully posted {{result}}

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

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
    })
  }
}

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