Angular 9/8/7 HttpClient Examples (GET, POST , UPDATE, DELETE)

In this how-to tutorial , we'll learn what is the HttpClient API available from HttpClientModule and how to use it in Angular 9 by example with request timeout, responsetype, query parameters, http headers, interceptors, typed and full responses, and error handling.

Also check out:

• Build an Angular 9/8 CRUD Example & Tutorial
• Angular 9 Tutorial and Example: Build your First Angular App

We'll be seeing examples of common HTTP methods such as GET, PUT, PATCH, POST and DELETE, that you usually need to use when communicating with a server, or consuming and fetching data from a REST API server.

We'll be learning about:

• Accessing Http Headers,
• Passing Http Parameters,
• Specifying HttpClient ResponseType i.e Text, JSON or Blob,
• Setting up HttpClient Interceptors,
• Implementing Http Error Handling,
• Dealing with Browser CORS and the Same Origin Policy

This tutorial is divided in the following parts:

• Importing HttpClient and sending Http get, post, put and delete requests to the server (this part),
• Building a service to encapsulate the HttpClient code interfacing with the server,
• Getting headers and typed and full responses with Angular HttpClient,
• Uploading files with Angular HttpClient
• Communicating with a Node.js & Express server using POST Requests
• Using the async pipe for sending GET requests,
• Handling CORS and the Same Origin Policy in modern web browsers

Also read:

Angular 7|6 Tutorial: Using Angular HttpClient with Node & Express.js - Example POST Requests

Angular 7|6 By Example: HTTP GET Requests with HttpClient (Services, async pipe and Observables)

Run Fake Rest API server

npm install -g json-server
json-server --watch db.json 

Run Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.