Angular 4.3 HttpClient (Accessing REST Web Services With Angular)
Setup a New Angular 4.3 Project.
The first step is to initiate a new Angular 4.3 project. The easiest way to do so is to use Angular CLI (Angular command line interface).
If you have not installed Angular CLI on your system yet, you first need to execute the following command to install the latest version:
$ npm install -g @angular/cli@latest
Now you can use the ng command to initiate a new Angular project:
$ ng new nghttp01
A new directory nghttp01 is created, the project template is downloaded and the dependencies are installed automatically.
Next open package.json in your favorite code editor and check that all Angular dependencies contain a version number of >4.3.0.
Having updated the package.json file you need to execute the command.
$ npm install
in the project directory in order to make sure that the corresponding packages are updated.
Making HttpClient Available In The Project
To be able to use the HttpClient service within your components we first need to include the HttpClientModule in the Angular application. First we need to import HttpClient module in the application’s root module in file app.module.ts:
Once imported you can make use of HttpClient in your components. To make HttpClient available in the component class you need to inject it into the class constructor like you can see in the following:
HttpClient will use the XMLHttpRequest browser API to execute HTTP request. In order to execute HTTP request of a specific type you can use the following methods which corresponds to HTTP verbs:
• get
• post
• put
• delete
• patch
• head
• jsonp
Using HttpClient To Request Data
Let’s implement a simple example which uses GitHub’s REST API to request user data. Insert the following code in file app.component.ts:
The output which is displayed in the browser console should look like the following:
Typed Response
From the console output you can see that the returned JSON object has a lot of properties. If you now try to access one of those properties by using the dot notation you’ll get back an error:
The error message is saying: “Property ‘login’ does not exist on type ‘Object’”. As data is of type Object you can not access properties directly. However we’re able to cast the response Object to a type which is containing the corresponding properties. Let’s define an interface type which is containing some if the properties which are part of the response:
Next, let’s make use of UserResponse to cast the return type of the get call:
Accessing the values by using data.login, data.bio and data.company is possible now. The output in the browser console should no deliver the following result:
Using HttpClient To Send Data
Next, let’s see how data can be send via HttpClient. For sending data we’ll be using the post method of the HttpClient object. Of course we need a backend which offers a REST API which accepts POST HTTP requests. To avoid setting up our own backend API we can instead make use of JSONPlaceholder which is a fake online REST API for testing and prototyping (https://jsonplaceholder.typicode.com/).
The endpoint http://jsonplaceholder.typicode.com/posts is support POST HTTP request. Let’s use that endpoint to create a new post record:
Here you can see that the data of the post request are passed to the post method as a second parameter in JSON format. We’re getting back a response which is confirming that the object has been created succesfully: