Share the post

Use of HttpClientModule In Ionic :

In this topic, We will see What is HttpClientModule in Ionic? I divided this topic into two parts In part 1 we will see how to import HttpClientModule & Create Common Provider for the same. In Part 2 We will see How to call the service created in Part – 1 Provider.

Use of HttpClientModule – Part1 :

Today we will see the most important topic that is HttpClientModule.When we build any online mobile application we need to do some HTTP calls to communicate with our server. Exactly here the role of HttpClientModule came into the picture. We use angular HttpClientModule to HTTP calls. How ? we will see that step by step.

You need to import HttpClientModule at app.module.ts as shown in the below image


after that, We will create one common provider for HTTP calls that is the rest provider

Just create a provider by writing the following command

ionic g provider rest

after that in our rest provider we do the following steps :

  1. Import HttpClient form @angular/common/http ==> To communicate backend services over http protocols.
  2. Import Observable from rxjs/Observable ==> rxjs means reactive extension for javascript
  3. Its a library for reactive programming.
  4. 3.Import map & catchError from rxjs/operators. ==> Operator map is use for sophisticated manipulation of collection catchError let you handle known errors.
  5. Write the below code as shown in the image.

Use of HttpClientModule in Ionic – Part2 :

We will now continue with our topic which is HttpClientModule in ionic

1. After creating a common rest provider if we call the doLogin function which is created in the rest provider we need to do the following steps in our ts file.   1. Import common provider class  


2. Create a constructor of the provider class.  


3. Call doLogin on click of the Login button    


    That’s it. We can make now multiple functions like doLogin in rest provider & call it whenever required. This is a common observable approach we use in ionic 3.

Leave a Comment