Ionic 4 HTTP POST with Angular by Example

In this Ionic 4/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:

In the previous tutorial, we've seen what's a REST API and RxJS. We also configured our Ionic 4/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 4 is now framework agnostic but provides support for Angular via the ionic/angular package. Ionic 4/Angular is considered the next version of Ionic 3.

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

      Ionic 4/Angular POST Request Example

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

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

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

  selector: 'app-home',
  templateUrl: '',
  styleUrls: [''],
export class HomePage implements OnInit {

  constructor(public httpClient: HttpClient) {

  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": "",
            "tel": "0000252525"
    }"", postData, requestOptions)
      .subscribe(data => {
       }, 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.


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

Note: We also publish our tutorials on Medium and If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub

Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.

comments powered by Disqus Protection Status