Ionic 4 HttpClient CRUD Service Tutorial to Consume RESTful Server API

Angular’s HttpClient service enables communication between application and server by making an HTTP call to RESTfull API endpoints. In response, we get JSON data which is consumed to show meaningful content to users in client-side applications.

In this tutorial we are going to learn, how to use HttpClient service in Ionic 4 Application to make server HTTP calls with custom headers and propper Error Handling using RxJS operators. In our student application, we will implement CRUD (Create, Read, Update and Delete) operations to communicate with a Mock Server which we will build using JSON-Server NPM package.

Let’s get started with our step-wise tutorial!

Here we will create a new Ionic 4 Application a blank template using Ionic CLI tool with the latest version v5.2.4

Create Ionic 4 Application

Run the following command in terminal to create a new Ionic 4 application with a blank template:

Add New Pages in Application

For our Students application, we will create 4 new pages and delete Home page which is created by default with blank template.

Run the following commands to generate new pages:

Update Routing Module

Also, update app-routing.module.ts file to add the route paths for above new added components and remove home route as we don’t need it right now.

Add HttpClientModule in Application

For making HTTP calls to the server we need to import HttpClientModule in application’s main module file.

Update the app.module.ts file with the following code:

HttpConfig Service with Methods for CRUD Operations

Next, we will create a new service which will have methods for making server HTTP calls for CRUD operations.

In this service, we will also import HttpHeader and HttpErrorResponse class for manipulating HTTP headers and handle errors.

Now create a new service file named api.service.ts under services folder by running following ng generate command:

For getting JSON response from the server we need to set the ‘Content-Type‘ of every with ‘application/json

 

Also, create an Interface class for Students data by running following command defining the type of values for student item.

then replace the following content in the newly created file “~/models/student.ts

Mock Server for Application

To create a fully working Application, we will create a local running server by installing json-server package. Run following NPM command to install:

Create a new data.json file at the project root “~API/data.json” and replace the following JSON data in it:

You can run server response by running following NPM command:

It will return a smiley face \{^_^}/ hi! with the server data path: http://localhost:3000/students

Create New Students

In Create component template we will add a form to take Name, Age, and Address values from the user which will get submitted using submitForm() method.

Update student-create.page.html file with below code:

In the student-create.page.ts file, we will have the submitForm() method to call API service method createItem() to return an Observable. After successfully submitting value we will navigate to list page using Router service.

List Students Component

In list page, we will list all Students in our data.json file in a bootstrap table with rows iterating using *ngFor directive.

The table will also have an Action colum to show Edit and Delete buttons. In Edit action we are simply redirecting to Edit component with item id which we will update in later. The delete button will call delete method in our API service.

Replace the student-list.page.html file with the following code:

In the student-list.page.ts file, we will get the list of all students by calling getList() and also add delete()  to call deleteItem() method in API service.

Update Student Item

In Edit component we will get the id of item using ActivatedRoute service then get its details. After that, we will show Form field controls to edit them, after that user can update the value to call the updateItem method in API service.

In the student-edit.page.html file replace following HTML content:

Now in student-edit.page.ts file replace following class component code:

That’s it now you are ready to run your app by hitting following command

Don’t forget to run the json-server to up API server by running following command in a separate console.

If you are using Visual Studio Code terminal then you can hit plus icon to open a new terminal.

Conclusion: So here we create a demo application to show how to communicate with the server to consume RESTful API. We also created a Mock server with the help of awsome json-server npm package.

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

avatar
  Subscribe  
Notify of