Ionic 5 HTTP POST with Angular by Example

In this Ionic 5/Angular tutorial, we'll learn how to send an example HTTP post request to a server (or post data to a server). Usually the POST data is submitted using a form by the user. In this example we'll be sending a simple JSON object. You can see how to post multipart form data in this tutorial.

Note: For a complete and detailed tutorial, check out:

• Ionic 5 JWT Authentication Tutorial: Using Angular HttpClient with Node & Express.js Server
• Ionic 5 Tutorial: Building and Theming a Login & Register UI with Angular Forms

In the previous tutorial, we've seen what's a REST API and RxJS. We also configured our Ionic 5/Angular application to use HttpClient and created (mocked) a REST server for testing. Now let's see how to send a POST request to our server.

Note: This tutorial was originally created for Ionic 3. Ionic 5 is now framework agnostic but provides support for Angular via the ionic/angular package. Ionic 5/Angular is considered the next version of Ionic 3.

Adding an Ionic 5 Buttom for Sending Post Requests

Start by opening the src\app\home\home.page.html file and update it by adding a button which will be used to call the method to send the post request:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic 5/Angular POST Request Example
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <p>
      Sending a POST Request Example with Ionic 5
  </p>
   <button ion-button (click)="sendPostRequest()">Post Data</button>
</ion-content>

Sending Post Requests with Ionic 5 HttpClient

Next, open the src\app\home\home.page.ts file and add the following changes:

import { Component, OnInit } from '@angular/core';
import { HttpClient, Headers, RequestOptions } from '@angular/common/http';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {

  constructor(public httpClient: HttpClient) {
  }
  ngOnInit(){}

  sendPostRequest() {
    var headers = new Headers();
    headers.append("Accept", 'application/json');
    headers.append('Content-Type', 'application/json' );
    const requestOptions = new RequestOptions({ headers: headers });

    let postData = {
            "name": "Customer004",
            "email": "[email protected]",
            "tel": "0000252525"
    }

    this.http.post("http://127.0.0.1:3000/customers", postData, requestOptions)
      .subscribe(data => {
        console.log(data['_body']);
       }, error => {
        console.log(error);
      });
  }
}

We start by importing the HttpClient, Headers, RequestOptions classes. After that, we inject the HttpClient service into the component constructor as httpclient.

Next, we define the sendPostRequest() method which will be called when the button is clicked. We are calling the post() method from the injected instance of the HttpClient service. The first parameter is the API endpoint and the second parameter is the customer data object. We also subscribe to the observable returned by the post() method using the .subscribe() method. If the operation is successful we display the _body of data received by the success function. If there is an error we log the error on the console.

Conclusion

In this quick tutorial, we've seen to use the HttpClient service to send http POST data in Ionic 5/Angular applications.

• Date: 12 Feb 2020