Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

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

Posted on November 23, 2022

 

 

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

 

 

TypeScript
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

 

 

TypeScript
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

 

 

Recent Posts

  • Android Java Tutorial to Change Styles & Visibility of System Bars (Top, Action & Status) Full Example
  • Android Java Project to Display & Play Audio Files From Storage inside ListView Using MediaPlayer Class
  • Android Java Project to Build MP4 Video to MP3 Audio Converter Using MediaMuxer Class
  • Android Java Project to Merge Multiple PDF Documents From Gallery Using iTextPDF Library
  • Android Java Project to Detect System Hardware & System CPU Info & Display inside TextView Widget
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme