HttpClient
to send HTTP requests or make API calls to RESTful endpoints of remote servers in order to fetch data.HttpClient
code interfacing with the server (this part),You may need to add sudo on debian-based systems or macOS to install packages globally.
HttpClient
ModuleHttpClient
module which allows developers to send HTTP requests and make API calls to remote HTTP servers.HttpClient
is available from the @angular/common/http
package and it replaces the old HTTP client that was available from the @angular/http
package.XMLHttpRequest
interface and the fetch()
API (available only on modern browsers).HttpClient
module is built on top of the XMLHttpRequest
interface. It wraps all the complexities of this interface and provides extra features like:HttpClient
module in your Angular 8 project.HttpClient
ModuleHttpClient
, let's now see how you can configure it in your Angular 8 application.HttpClientModule
from the @angular/common/http
package and include it in the imports
array of main the application module.src/app/app.module.ts
file and add the following code at the top of the file:HttpClientModule
in the imports
array of the application module:HttpClient
library to send HTTP requests to a third-party API server or to your back-end REST API server.HttpClient
in your project, you need to create a service which will import HttpClient
and use it to send any HTTP requests needed in your application.api.service.spec.ts
file that contains tests and the api.service.ts
file that contains the service's code.You will not add any tests in this tutorial, so all the work will be done inside theapi.service.ts
file.
www.server.com/api/customers
endpoint which returns a set of customer objects. Each customer has the following attributes:Customer
class which will be used as a type for each fetched customer objectTheCustomer
class is called a model.
Customer
model using the following command:You can also use justg
instead ofgenerate
.
src/app
folderFor simple projects, the organization we used is OK but for big projects you may need to create amodels
folder where you can put your class model(s). And also use feature modules to encapsulate separate parts of your project. For example, in this project you could use acustomers
module that contains the API service, the Customer model and any components then import it in the main application module.
src/app/customer.ts
file and add:TheCustomer
class is a user-defined type that makes use of built-in TypeScript types likenumber
andstring
to define a model.You also need to export the model class using theexport
TypeScript keyword, because it will be imported from other classes like the API service or the components.
src/app/api.service.ts
file and import then inject HttpClient
:HttpClient
as a private httpClient
instance in the service's constructor.apiURL
string variable which stores the address of the remote API server.www.server.com/api/customers
endpoint.HttpClient
into the service, you can now create the CRUD methodsCustomer
model class as a type, either for the parameters or the return results, you first need to import the class inside the service's file:.getCustomers
method which implements the logic for getting pages of data from the server..createCustomer
method which takes a parameter of the Customer
type and send it to the server..updateCustomer
method to update a customer,.deleteCustomer
method to delete a customer by id,.getCustomerById
method for getting a customer by id..getCustomers
method will be used for fetching customers.firstPage
for storing the URL of the first page,prevPage
for storing the URL of the previous page,nextPage
for storing the URL of the next page,lastPage
for storing the URL of the last page.TheprevPage
andnextPage
variables are constantly updated with each coming response.
ApiService
add the following code:.getContacts
method. The simple version of this method would simply be:Observable
that you need to subscribe to, in your components, in order to fetch the customers data from the server.We use the TypeScript${}
string interpolation operator and back-ticks to format the endpoint URL.
Link
headers, you need add the following code instead:url
parameter to the method then inside the method body, you check if the url
was passed:HttpClient.get
method.www.server.com/api/customers?page=1
which refers to the first page of data..getContacts
method to firstly get the first page of data and then to get the next pages by providing the URLs of previous and next pages that you initially retrieve from the first received response.{observe: 'response'}
as the second parameter to the HttpClient.get
method. This tells HttpClient
to return the full response with headers included which will allow us to retrieve the Link
header that contains the paging information from the server..parse_link_header
method to parse the Link
header,.retrieve_pagination_links
method to set pagination links once the Link
header is parsed..parse_link_header
method:.retrieve_pagination_links
method:.getContacts
method.In this method, you simply format the URL to a single customer by its id.
.createCustomer
method which sends a POST request to the server. It takes a parameter of type Customer
:HttpClient.post
method that takes the URL and the customer object to send to the server with a POST request.HttpClient
..updateCustomer
method that will be used to update customers data on the server:HttpClient.put
method to send a PUT request to the server..deleteCustomer
method which deletes a single customer by its identifier:HttpClient.delete
method which takes an URL parameter that points to the resource you want to delete./api/customers
endpoint.src/app/app.component.ts
file and start by importing ApiService
then inject it in AppComponent
:.ngOnInit
life-cycle method:.getCustomers
method retrieve the first page of data and returns an Observable
. You need to subscribe to it in order to send the actual request to the server.apiService.nextPage
variable and use it as a parameter to the second call of the .getCustomers
method to retrieve the second page and so on..getCustomers
method with the corresponding URLs that can be accessed from the this.apiService.firstPage
, this.apiService.previousPage
, this.apiService.nextPage
and this.apiService.lastPage
variables.customer
object:Remember that API calls are not sent to the server unless you are subscribed to theObservable
returned from these methods.
HttpClient
to send HTTP requests to the server.