Angular HttpClient get Example
August 15, 2021
This page will walk through Angular HttpClient.get()
example to perform HTTP GET requests. The HttpClient
is smaller, easier and powerful library for making HTTP requests. To use HttpClient
, we need to import HttpClientModule
in our application module and then we can inject HttpClient
in our components or services. The HttpClient
methods are get()
, post()
, delete()
, put()
etc. We will discuss here get()
method. The HttpClient.get()
constructs an Observable
with configured GET request and when the Observable
instance is subscribed, the HTTP GET request is executed on the server. Here on this page we will provide the use of HttpClient.get()
method in detail. For Web Service test URL we will use Angular In-Memory Web API.
Contents
- Technologies Used
- HttpClient.get()
- HttpClientModule
- Injecting HttpClient
- Requesting JSON using HttpClient.get()
- Using
async
Pipe with Observable - Requesting Text data using HttpClient.get()
- HttpParams and HttpHeaders
- HttpClient.get with
observe
Property - Error Handling
- RxJS retry() to Handle Error
- Angular In-Memory Web API to Test Application
- Complete Example
- Run Application
- References
- Download Source Code
Technologies Used
Find the technologies being used in our example.1. Angular 12.1.0
2. Node.js 12.14.1
3. NPM 7.20.3
4. Angular-in-memory-web-api 0.11.0
HttpClient.get()
TheHttpClient
serves the purpose to perform HTTP requests. The HttpClient
is an injectable class that performs HTTP GET request, using HttpClient.get
method. It accepts URL as string and options as object for parameters, headers etc, and returns an Observable
instance. When we subscribe this Observable
instance, HTTP GET
request is executed on the server. Find the syntax of HttpClient.get
method from Angular doc.
get(url: string, options: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: HttpObserve; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: 'arraybuffer' | 'blob' | 'json' | 'text'; withCredentials?: boolean; } = {}): Observable<any>
options: Object type.The
HttpClient.get
has following options to request HTTP GET method.
headers: It is of
HttpHeaders
types. It sets headers for the http GET request.
observe: It defines whether we want complete response or body only or events only. We need to assign values for
observe
property such as response for complete response, body for response with body and events for response with events.
params: It is of
HttpParams
type. It sets parameters in URL for http GET request.
reportProgress: It is of boolean type. It is useful when we are requesting blob data. Setting
reportProgress
value as true we can know progress report for our HttpClient.get
request.
responseType: It is used to define response type of
HttpClient.get
request. Its values can be arraybuffer, blob, json and text.
withCredentials: It is of boolean type. If the value is true then
HttpClient.get
will request data with credentials.
The response type of
HttpClient.get
is Observable
i.e. provided by RxJS library. Observable
is a representation of any set of values over any amount of time.
HttpClientModule
To useHttpClient
we need to import HttpClientModule
in our application module. Find the code snippet.
import { HttpClientModule } from '@angular/common/http'; @NgModule({ imports: [ HttpClientModule, ------ ], ------ }) export class AppModule { }
HttpClient
in our components or services.
Injecting HttpClient
We injectHttpClient
using constructor into our component or service. HttpClient
is imported from @angular/common/http
library as following.
import { HttpClient } from '@angular/common/http';
HttpClient
.
constructor(private http: HttpClient) { }
HttpClient
methods using http
instance. For example, find the code below.
getWriterWithFavBooks(): Observable<any> { return this.http.get(this.writerUrl); }
Requesting JSON using HttpClient.get()
Find the sample JSON data.{ writerId: 11, writerName: 'Mahesh', books: [ { id: '103', name: 'Angular Tutorial', category: 'Angular', year: '2021' }, { id: '104', name: 'Core Java Tutorial', category: 'Java', year: '2020' } ] }
writerUrl = "/api/writer";
HttpClient.get
as following.
writerUrl = "/api/writer"; getWriterWithFavBooks(): Observable<any> { return this.http.get(this.writerUrl, {responseType: 'json'}); }
responseType: 'json'
is optional we can also write it as following.
getWriterWithFavBooks(): Observable<any> { return this.http.get(this.writerUrl); }
Observable
for actual hit of request to server and get response.
getWriterWithFavBooks() { this.writerService.getWriterWithFavBooks().subscribe( (data: any) => this.favBooks = data['books'] ); }
export interface Book { id: number; name: string; category: string; year: string; } export interface Writer { writerId: number; writerName: string; books: Book[]; }
HttpClient.get
to return response as Writer
. Find the code snippet.
getFavoriteWriter(): Observable<Writer> { return this.http.get<Writer>(this.writerUrl, {responseType: 'json'}); }
http.get<Writer>(...)
, then it returns the instance of Observable<Writer>
type. Now subscribe to Observable<Writer>
to get instance of Writer
.
getFavoriteWriter() { this.writerService.getFavoriteWriter().subscribe( (data: Writer) => { this.favWriter = data; console.log(this.favWriter.books); } ); }
<div *ngIf="favWriter"> Writer Id: <b>{{favWriter.writerId}}</b>, Writer Name: <b>{{favWriter.writerName}}</b> <ul> <li *ngFor="let book of favWriter.books" > Id: {{book.id}}, Name: {{book.name}}, Category: {{book.category}}, Year: {{book.year}} </li> </ul> </div>
Using async
Pipe with Observable
The HttpClient.get
returns instance of Observable
. To display this data either we can subscribe to Observable
or we can use async
pipe with Observable
. We have already provided sample code above to display data by subscribing Observable
. Here find the code to display data using async
pipe. Suppose we have following JSON data.
[ { id: '103', name: 'Angular Tutorial', category: 'Angular', year: '2021' }, { id: '104', name: 'Core Java Tutorial', category: 'Java', year: '2020' } ]
Book
array type. We will provide type parameter as Book[]
. Now find the code for HttpClient.get
.
bookUrl = "/api/books"; getBooks(): Observable<Book[]> { return this.http.get<Book[]>(this.bookUrl); }
Observable
property.
obsBooks: Observable<Book[]> getBooks() { this.obsBooks = this.writerService.getBooks(); }
async
pipe to display data in HTML template.
<ul> <li *ngFor="let book of obsBooks | async" > Id: {{book.id}}, Name: {{book.name}}, Category: {{book.category}}, Year: {{book.year}} </li> </ul>
Requesting Text data using HttpClient.get()
To access text data usingHttpClient.get
we need to use responseType: 'text'
. Suppose we have following text.
Welcome to the Angular world!
textUrl = "/api/message";
HttpClient.get
with responseType: 'text'
as following.
getTextMsg(): Observable<string> { return this.http.get(this.textUrl, {responseType: 'text'}); }
async
pipe with Observable
or we can subscribe it to get text data. Find the sample example.
getTextMsg() { this.obsTextMsg = this.writerService.getTextMsg(); this.writerService.getTextMsg().subscribe( (msg: string) => console.log(msg) ); }
Observable
instance i.e. obsTextMsg
can directly be displayed on HTML template using async
pipe as following.
<h3 *ngIf="obsTextMsg | async as message"> {{ message }} </h3>
HttpParams and HttpHeaders
Angular providesHttpParams
class to use parameters and it provides HttpHeaders
class to use headers with HttpClient.get
request. Both HttpParams
and HttpHeaders
classes are immutable and imported from @angular/common/http
library. Both have methods such as set
and append
. set
constructs a new body with a new value and append
constructs a new body with an appended value.
We will import
HttpParams
and HttpHeaders
as following.
import { HttpHeaders, HttpParams } from '@angular/common/http';
HttpParams
and HttpHeaders
with HttpClient.get
request.
filterBooks(category: string, year: string): Observable<Book[]> { let httpHeaders = new HttpHeaders() .set('Accept', 'application/json'); let httpParams = new HttpParams() .set('category', category) .set('year', year); console.log(httpParams.toString()); console.log(httpHeaders.keys()); return this.http.get<Book[]>(this.bookUrl, { headers: httpHeaders, params: httpParams, responseType: 'json' }); }
HttpClient.get with observe
Property
HttpClient.get
method can use observe
property to define whether we want complete response or body only or events only. We need to assign values for observe
property such as
observe : 'response' for complete response.
observe : 'body' for response with body.
observe : 'events' for response with events.
Suppose we want complete response of our request then we will use
observe
property with HttpClient.get
as following.
getFullResponseForWriter(): Observable<HttpResponse<any>> { return this.http.get(this.writerUrl, { observe: 'response' }); }
HttpResponse
is from @angular/common/http
library. Now we will fetch body as well as headers of the response as following.
getWriter() { this.writerService.getFullResponseForWriter().subscribe( (res: HttpResponse<any>) => { this.writer = res.body; console.log(this.writer.books); console.log(res.headers.get('Content-Type')); }, (err: any) => { console.log(err); } ); }
Error Handling
To handle error, Angular providesHttpErrorResponse
class from @angular/common/http
library. HttpErrorResponse
contains useful information regarding error. The second parameter in subscribe()
is for error. We can log error as following.
getFavoriteWriter() { this.writerService.getFavoriteWriter().subscribe( (data: Writer) => { this.favWriter = data; }, (err: HttpErrorResponse) => { console.log(err); } ); }
HttpClient.get
can face two types of errors.
a. If backend returns unsuccessful response codes such as 404, 500 etc then
HttpClient.get
will throw error with backend response code.
b. If something goes wrong client-side, for example, an exception is thrown by RxJS operators or if network error prevents the request from completing successfully then actual
Error
object is thrown by HttpClient.get
.
We can check if error is of
Error
type or not by using HttpErrorResponse
and accordingly log the error messages.
HttpErrorResponse
can be imported from @angular/common/http
library as following.
import { HttpErrorResponse } from '@angular/common/http';
getFavoriteWriter() { this.writerService.getFavoriteWriter().subscribe( (data: Writer) => { this.favWriter = data; }, (err: HttpErrorResponse) => { if (err.error instanceof Error) { //A client-side or network error occurred. console.log('An error occurred:', err.error.message); } else { //Backend returns unsuccessful response codes such as 404, 500 etc. console.log('Backend returned status code: ', err.status); console.log('Response body:', err.error); } } ); }
RxJS retry() to Handle Error
Some errors can be handled by just retrying request such as if errors are transient and unlikely to repeat. For example if we have slow network error and our request could not become successful then there are the chances to make request successful if request is retried.To retry request automatically RxJS provides
retry()
operator that is called on Observable
. retry()
operator accepts number argument, suppose we pass argument as retry(3)
then the request will be retried for 3 times.
retry()
is imported from RxJS as following.
import { retry } from 'rxjs/operators';
retry()
.
getFavoriteWriter() { this.writerService.getFavoriteWriter().pipe( retry(2) ).subscribe( (data: Writer) => { this.favWriter = data; console.log(this.favWriter.books); }, (err: HttpErrorResponse) => { if (err.error instanceof Error) { //A client-side or network error occurred. console.log('An error occurred:', err.error.message); } else { //Backend returns unsuccessful response codes such as 404, 500 etc. console.log('Backend returned status code: ', err.status); console.log('Response body:', err.error); } } ); }
Angular In-Memory Web API to Test Application
To test application we need Web Service URL. Angular provides In-Memory Web API that will provide Web Service URL. We can configure URLs with dummy data using In-Memory Web API. Find the steps to use Angular In-Memory Web API.1. Open the command prompt and navigate to the directory where
package.json
resides and run following command.
npm i angular-in-memory-web-api@0.11.0 --save
InMemoryDbService
. Define createDb()
method with some dummy data.
test-data.ts
import { InMemoryDbService } from 'angular-in-memory-web-api'; export class TestData implements InMemoryDbService { createDb() { //JSON data let bookDetails = [ { id: '101', name: 'Angular by Krishna', category: 'Angular', year: '2020' }, { id: '102', name: 'AngularJS by Krishna', category: 'Angular', year: '2020' }, { id: '103', name: 'Angular by Vishnu', category: 'Angular', year: '2021' }, { id: '104', name: 'Core Java by Vishnu', category: 'Java', year: '2021' }, { id: '105', name: 'JSP & Servlet by Vishnu', category: 'Java', year: '2021' }, { id: '106', name: 'JPA by Vishnu', category: 'Java', year: '2021' }, { id: '107', name: 'Hibernate by Krishna', category: 'Hibernate', year: '2020' } ]; //JSON data let writerDetails = { writerId: 11, writerName: 'Mahesh', books: [ { id: '103', name: 'Angular Tutorial', category: 'Angular', year: '2021' }, { id: '104', name: 'Core Java Tutorial', category: 'Java', year: '2020' } ] }; //Text data let welcomeMsg = "Welcome to the Angular world!"; return { books: bookDetails, writer: writerDetails, message: welcomeMsg }; } }
/api/books /api/writer /api/message
InMemoryWebApiModule
in application module and configure TestData
class as following.
import { InMemoryWebApiModule } from 'angular-in-memory-web-api'; import { TestData } from './test-data'; @NgModule({ imports: [ ------ InMemoryWebApiModule.forRoot(TestData) ], ------ }) export class AppModule { }
Complete Example
Find the project structure.my-app | |--src | | | |--app | | | | | |--book.ts | | |--writer.ts | | |--writer.service.ts | | |--writer.component.ts | | |--writer.component.html | | | | | |--test-data.ts | | | | | |--app.component.ts | | |--app.module.ts | | | |--main.ts | |--index.html | |--styles.css | |--node_modules |--package.json
book.ts
export interface Book { id: number; name: string; category: string; year: string; }
import { Book } from './book'; export interface Writer { writerId: number; writerName: string; books: Book[]; }
import { Injectable } from '@angular/core'; import { HttpClient, HttpHeaders, HttpResponse } from '@angular/common/http'; import { Observable } from 'rxjs'; import { Book } from './book'; import { Writer } from './writer'; @Injectable({ providedIn: 'root' }) export class WriterService { constructor(private http: HttpClient) { } textUrl = "/api/message"; getTextMsg(): Observable<string> { return this.http.get(this.textUrl, { responseType: 'text' }); } bookUrl = "/api/books"; getBooks(): Observable<Book[]> { return this.http.get<Book[]>(this.bookUrl); } filterBooks(category: string, year: string): Observable<Book[]> { let httpHeaders = new HttpHeaders() .set('Accept', 'application/json'); return this.http.get<Book[]>(this.bookUrl + '?category=' + category + '&year=' + year, { headers: httpHeaders, responseType: 'json' }); } writerUrl = "/api/writer"; getWriterWithFavBooks(): Observable<any> { return this.http.get(this.writerUrl, { responseType: 'json' }); } getFavoriteWriter(): Observable<Writer> { return this.http.get<Writer>(this.writerUrl, { responseType: 'json' }); } getFullResponseForWriter(): Observable<HttpResponse<any>> { return this.http.get(this.writerUrl, { observe: 'response' }); } myUrl = "/api/invalid"; getDataForUrl(): Observable<any> { return this.http.get(this.myUrl); } }
import { Component, OnInit } from '@angular/core'; import { Observable } from 'rxjs'; import { HttpErrorResponse, HttpResponse } from '@angular/common/http'; import { FormBuilder, FormControl } from '@angular/forms'; import { retry } from 'rxjs/operators'; import { WriterService } from './writer.service'; import { Book } from './book'; import { Writer } from './writer'; @Component({ selector: 'app-writer', templateUrl: './writer.component.html' }) export class WriterComponent implements OnInit { obsTextMsg: Observable<string>; obsBooks: Observable<Book[]>; books: Book[] = []; favBooks: Book[] = []; favWriter = {} as Writer; writer = {} as Writer; categories = [ { category: 'Angular' }, { category: 'Hibernate' }, { category: 'Java' } ]; years = [ { year: '2020' }, { year: '2021' } ]; constructor(private writerService: WriterService, private formBuilder: FormBuilder) { this.obsTextMsg = this.writerService.getTextMsg(); this.obsBooks = this.writerService.getBooks(); } ngOnInit() { this.getTextMsg(); this.getBooks(); this.getWriterWithFavBooks(); this.getFavoriteWriter(); this.getWriter(); this.getData(); this.bookForm = this.formBuilder.group({ category: '', year: '' }); } bookForm = this.formBuilder.group({ category: [''], year: [''] }); getCategory() { return this.bookForm.get('category') as FormControl; } getYear() { return this.bookForm.get('year') as FormControl; } onFormSubmit() { let category = this.getCategory().value; let year = this.getYear().value; this.filterBooks(category, year); } getTextMsg() { this.obsTextMsg = this.writerService.getTextMsg(); this.writerService.getTextMsg().subscribe( (msg: string) => console.log(msg) ); } getBooks() { this.obsBooks = this.writerService.getBooks(); } filterBooks(category: string, year: string) { this.writerService.filterBooks(category, year) .subscribe((data: Book[]) => this.books = data); } getWriterWithFavBooks() { this.writerService.getWriterWithFavBooks().subscribe( (data: any) => this.favBooks = data['books'] ); } getFavoriteWriter() { this.writerService.getFavoriteWriter().pipe( retry(2) ).subscribe( (data: Writer) => { this.favWriter = data; console.log(this.favWriter.books); }, (err: HttpErrorResponse) => { if (err.error instanceof Error) { //A client-side or network error occurred. console.log('An error occurred:', err.error.message); } else { //Backend returns unsuccessful response codes such as 404, 500 etc. console.log('Backend returned status code: ', err.status); console.log('Response body:', err.error); } } ); } getWriter() { this.writerService.getFullResponseForWriter().subscribe( (res: HttpResponse<any>) => { this.writer = res.body; console.log(this.writer.books); console.log(res.headers.get('Content-Type')); }, (err: any) => { console.log(err); } ); } getData() { this.writerService.getDataForUrl().pipe( retry(3) ).subscribe( res => { console.log(res); }, (err: HttpErrorResponse) => { if (err.error instanceof Error) { //A client-side or network error occurred. console.log('An error occurred:', err.error.message); } else { //Backend returns unsuccessful response codes such as 404, 500 etc. console.log('Backend returned status code: ', err.status); console.log('Response body:', err.error); } } ); } }
<h3 *ngIf="obsTextMsg | async as message"> {{ message }} </h3> <h3>Book Details</h3> <ul> <li *ngFor="let book of obsBooks | async"> Id: {{book.id}}, Name: {{book.name}}, Category: {{book.category}}, Year: {{book.year}} </li> </ul> <h3>Filter Books</h3> <form [formGroup]="bookForm" (ngSubmit)="onFormSubmit()"> Select Category: <select formControlName="category"> <option *ngFor="let cat of categories" [ngValue]="cat.category"> {{ cat.category }} </option> </select> Select Year: <select formControlName="year"> <option *ngFor="let yr of years" [ngValue]="yr.year"> {{ yr.year }} </option> </select> <button>SUBMIT</button> </form> Result: <ul> <li *ngFor="let book of books"> Id: {{book.id}}, Name: {{book.name}}, Category: {{book.category}}, Year: {{book.year}} </li> </ul> <h3>Favorite Books</h3> <ul> <li *ngFor="let book of favBooks"> Id: {{book.id}}, Name: {{book.name}}, Category: {{book.category}}, Year: {{book.year}} </li> </ul> <h3>Favorite Writer Details</h3> <div *ngIf="favWriter"> Writer Id: <b>{{favWriter.writerId}}</b>, Writer Name: <b>{{favWriter.writerName}}</b> <ul> <li *ngFor="let book of favWriter.books"> Id: {{book.id}}, Name: {{book.name}}, Category: {{book.category}}, Year: {{book.year}} </li> </ul> </div> <h3>Writer Details</h3> <div *ngIf="writer"> Writer Id: <b>{{writer.writerId}}</b>, Writer Name: <b>{{writer.writerName}}</b> <ul> <li *ngFor="let book of writer.books"> Id: {{book.id}}, Name: {{book.name}}, Category: {{book.category}}, Year: {{book.year}} </li> </ul> </div>
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <app-writer></app-writer> ` }) export class AppComponent { }
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { ReactiveFormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; import { AppComponent } from './app.component'; import { WriterComponent } from './writer.component'; //For InMemory testing import { InMemoryWebApiModule } from 'angular-in-memory-web-api'; import { TestData } from './test-data'; @NgModule({ imports: [ BrowserModule, HttpClientModule, ReactiveFormsModule, InMemoryWebApiModule.forRoot(TestData) ], declarations: [ AppComponent, WriterComponent ], providers: [ ], bootstrap: [ AppComponent ] }) export class AppModule { }
Run Application
To run the application, find the steps.1. Download source code using download link given below on this page.
2. Use downloaded src in your Angular CLI application. To install Angular CLI, find the link.
3. Install angular-in-memory-web-api@0.11.0
4. Run ng serve using command prompt.
5. Access the URL http://localhost:4200
Find the print screen of the output.

References
HttpClientCommunicating with backend services