In this tutorial we will show you angular http post example, here we need implement httpclient example so we have to use any api with the help of we can post our data to fake back end server.
To call fake backend server request we used http.post() method then when we gets response from server we can post our message on http post.
Step By Step Guide On Angular HTTP Post Example :-
To achieve http post result we need supports of HttpClient, HttpClientModule so we imported these files on ts files.
After filling input field when user clicks on submit it calls ‘postData()’ function defined in component.ts file within function we used api ‘http://httpbin.org/post’ for make example of http post using that we sends our observable to toPromise() function for convert as ‘promise’.
Using then we waits for returns single promise value and posted our user inputs on console using console.log() method, here the ‘stringify’ converts object to string.
Src/app/app.module.ts
import { FormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; imports: [ HttpClientModule, FormsModule ],
Src/app/app.component.html
<input type="text" [(ngModel)]="name" placeholder="name"> <button (click)="postData()">Post Data</button><br> you have successfully posted {{result}}
Src/app/app.component.ts
import { Component } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { name : String = ''; result: String=''; constructor(private http:HttpClient){ } postData(){ let url="http://httpbin.org/post" this.http.post(url,{ name:this.name }).toPromise().then((data:any)=>{ console.log(data) console.log(JSON.stringify(data.json.name)) this.result=JSON.stringify(data.json.name) }) } }
- As we know in angular component source had separated files in those we need to add some code on ‘app.component.ts, app.module.ts and app.component.html’. The app.component.ts is the main building block for angular application and always typescript class that defines behavior.
- Each files had their separate definitions they will works based on that we just add code for what we need. In app.component.html we defined input field and ‘Post Data’ button to post user inputs on http.
- In input tag we used ng-model directive for collects user input and in button we defined ‘postData()’ function call. Then we just added success sentence with user input to show on clients.
- In ‘app.module.ts’ file we need to import ‘HttpClientModule’ lib for getting http supports and don’t forget to add those imported file declaration on ‘imports’ array.
- In ‘app.component.ts’ file we imported ‘HttpClient’ for gets library support then in class we initialized values type and sets as null and we defined function postData(), here we needs to call http.post() for post any values to http server.
- For that we need api so defined ‘http://httpbin.org/post’ and stored to variable ‘url’. The toPromise() function lives on the prototype of observable and it’s a util method to convert an observable into a promise.
- This function has observable it resolves promise and emits value to the http. By using this we posted our user input to console. When posting on console we used stringify to convert as json then displayed on console.
Conclusion :-
In conclusion now we are able to know how to post user input on http using angular. For seeing result on webpage we need supports of server and internet connection.
As we know commend ‘ng serve’ will execute our code on server at port ‘localhost:4200’.
Initially our result on webpage contains one input field and a button to post on console. After filling input field when user clicks on ‘Post Data’ it will post user data to console.
For seeing console result we need to right click on webpage and select ‘inspect’ last option then browsers left side one panel will open. There we can see our result of json input.
I hope this tutorial on angular http post example helps you and the steps and method mentioned above are easy to follow and implement.