Angular 8 REST API and HttpClient Examples

In this article, we discuss Angular 8 REST API and HttpClient Examples

Angular 8 REST API and HttpClient Examples

Angular 8 REST API and HttpClient Examples
Angular 8 REST API and HttpClient Examples

Angular 8 REST API and HttpClient Examples

In this Angular 8 tutorial, we will show you a comprehensive step-by-step Angular 8 tutorial on consuming REST API using Angular HttpClient. As you see in almost all Angular or MEAN stack tutorials in this site always uses REST API access. So, we will cover more details about consuming the REST API using Angular HttpClient and other required modules.

Preparation

We will start this tutorial by creating an Angular 8 app using Angular CLI. First, we will install Angular CLI using this command in the terminal or Node.js command line.

sudo npm install -g @angular/cli

Next, create a new Angular 8 app using Angular CLI by type this command.

ng new angular-httpclient

That command will create a new Angular 8 app with the name `angular-httpclient` and pass all questions as default then the Angular CLI will automatically install the required NPM modules. After finished, go to the newly created Angular 8 folder then run the Angular 8 app for the first time.

cd ./angular-httpclient
ng serve --open

Using that “–open” parameters, will automatically open the Angular 8 in your default web browser. Here’s the Angular 8 default page look like.

Angular 8 REST API and HttpClient Examples

Angular 8 REST API and HttpClient Examples
Angular 8 REST API and HttpClient Examples

Angular 8 REST API and HttpClient Examples

Setup Local JSON File or Remote REST API Service

we will use one of the Local JSON file or the remote REST API service that will consume or call by Angular HttpClient. For local JSON file, simply, create a new folder inside `src/assets`.

mkdir src/assets/data
touch src/assets/data/smartphone.json

Open and edit `src/assets/data/smartphone.json` then add these lines of JSON data.

[
  {
    "id": "P0001",
    "name": "iPhone XR",
    "desc": "iPhone XR 128GB Internal Memory, 8GB RAM, 6 Inch IPS Display",
    "price": 499,
    "updated": "Wed Sep 20 2019 17:22:41 GMT+0700"
  },
  {
    "id": "P0002",
    "name": "iPhone 11 Pro Max",
    "desc": "Super Retina XDR display, 5.8‑inch (diagonal) all‑screen OLED Multi‑Touch display, HDR display, 2436‑by‑1125-pixel resolution at 458 ppi 2,000,000:1 contrast ratio (typical)",
    "price": 699,
    "updated": "Wed Sep 20 2019 17:22:41 GMT+0700"
  },
  {
    "id": "P0003",
    "name": "iPhone 12",
    "desc": "Liquid Retina HD display 6.1-inch (diagonal) all-screen LCD Multi-Touch display with IPS technology 1792-by-828-pixel resolution at 326 ppi 1400:1 contrast ratio (typical)",
    "price": 599,
    "updated": "Wed Sep 20 2019 17:22:41 GMT+0700"
  }
]

Now, the local JSON file is ready to use with your Angular HttpClient. Next, to prepare the remote REST API, we already have the source codes and tutorials for you with MongoDB or PostgreSQL.

  1. Express.js and PostgreSQL
  2. Express.js and MongoDB

You can choose one of them and make sure you have installed the required database (PostgreSQL or MongoDB) then you can clone that Node-Express REST API server and run it from your local machine.

Angular 8 REST API and HttpClient Examples

Setup Angular 8 HttpClient

The Angular 8 HttpClient simplified the client HTTP API on the XMLHttpRequest interface exposed by browsers. The Angular HttpClient has features of testability features, typed request and response objects, request and response interception, Observable APIs, and streamlined error handling. This module already included when creating a new Angular app. We just need to register it this Angular app. Open and edit `src/app/app.module.ts` then add this import of HttpClientModule that is part of @angular/common/http.

import { HttpClientModule } from '@angular/common/http';

Add it to @NgModule imports array after the BrowserModule.

imports: [
  BrowserModule,
  HttpClientModule
],

Now, the Angular HttpClient is ready to use or inject with the Angular service or component.

Angular 8 REST API and HttpClient Examples

Basic Local JSON or RESP API Request Example

We will put all REST API or JSON requests in the Angular Service. To do that, generate an Angular Service using this Angular Schematic command.

ng g service api

Open and edit `src/app/api.service.ts` then add this import of HttpClient that part of @angular/common/http.

import { HttpClient } from '@angular/common/http';

Inject that HttpClient module to the constructor of the Angular service.

constructor(private http: HttpClient) { }

Declare a constant variable before the @Injectable that hold the local URL of JSON file.

const localUrl = 'assets/data/smartphone.json';

You change to the URL of your REST API server if you are using remote REST API. Add a function below the constructor to get the data from the JSON file.

getSmartphone() {
  return this.http.get(localUrl);
}

Now, you can access the JSON call from the Angular component. Open and edit `src/app/app.component.html` then add or modify these imports of Angular OnInit and ApiService.

import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';

Inject the ApiService to the constructor.

constructor(private api: ApiService) {}

Add a variable before the constructor that holds the response from the data subscription.

smartphone: any = [];

Add a new function to subscribe to data that emits from the ApiService then put it to an array variable that previously declared with the specific fields.

getSmartphones() {
  this.api.getSmartphone()
    .subscribe(data => {
      for (const d of (data as any)) {
        this.smartphone.push({
          name: d.name,
          price: d.price
        });
      }
      console.log(this.smartphone);
    });
}

If you run the app now, you can see the array of data in the browser console that returned from the ApiService like this.

(3) [{…}, {…}, {…}]
0: {name: "iPhone X", price: 499}
1: {name: "iPhone 11 Pro", price: 699}
2: {name: "iPhone XR", price: 599}
length: 3

The previous function uses a blind (any) type for the response of the subscribed data and returns the only array of data as shown in the JSON file. Now, we will show you to use a type and full response which including special headers or status codes to indicate certain conditions that are important to the application workflow. We can create a new file to declare those fields of type or directly create an export interface of the type in the same component file. For this example, we will use a separate Typescript file.

touch src/app/smartphone.ts

Next, open and edit `src/app/smartphone.ts` then add these lines of type fields as the exported interface.

export interface Smartphone {
  id: string;
  name: string;
  desc: string;
  price: number;
  updated: Date;
}

Next, back to the service then add or modify these imports.

import { HttpClient, HttpResponse } from '@angular/common/http';
import { Smartphone } from './smartphone';
import { Observable } from 'rxjs';

Change the GET data function to this function.

getSmartphone(): Observable<HttpResponse<Smartphone[]>> {
  return this.http.get<Smartphone[]>(
    localUrl, { observe: 'response' });
}

Next, back to the component then add this import of the above type interface.

import { Smartphone } from './smartphone';

Change the variable type from any to Smartphone type.

smartphone: Smartphone[] = [];

Modify the function that calls the ApiService.

getSmartphones() {
  this.api.getSmartphone()
  .subscribe(resp => {
    console.log(resp);
    const keys = resp.headers.keys();
    this.headers = keys.map(key =>
      `${key}: ${resp.headers.get(key)}`);

    for (const data of resp.body) {
      this.smartphone.push(data);
    }
    console.log(this.smartphone);
  });
}

Now, you will see the full response.

HttpResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://localhost:4200/assets/data/smartphone.json", ok: true, …}body: (3) [{…}, {…}, {…}]headers: HttpHeaders {normalizedNames: Map(7), lazyUpdate: null, lazyInit: null, headers: Map(7)}ok: truestatus: 200statusText: "OK"type: 4url: "http://localhost:4200/assets/data/smartphone.json"__proto__: HttpResponseBase

To GET data by ID simply add this function to the API service.

getSmartphoneById(id: any): Observable<any> {
  return this.http.get<Smartphone>(localUrl + id).pipe(
    retry(3), catchError(this.handleError<Smartphone>('getSmartphone')));
}

In the component add this function.

getSmartphoneById(id: any) {
  this.api.getSmartphoneById(id)
    .subscribe(data => {
      console.log(data);
    });
}

Angular 8 REST API and HttpClient Examples

Angular HttpClient Error Handling

We have to add an error handling to handle any error on every HttpClient requests. To do that, simply open and edit `src/app/api.service.ts` then add this function that handles the error in a simple way.

private handleError<T>(operation = 'operation', result?: T) {
  return (error: any): Observable<T> => {
    console.error(error);
    this.log(`${operation} failed: ${error.message}`);

    return of(result as T);
  };
}

private log(message: string) {
  console.log(message);
}

In the above codes, we are creating 2 functions for handle error and print log of error. There are the new required modules, so, add it to existing imports.

import { Observable, of } from 'rxjs';

Next, add a HttpClient request function with catchError.

getSmartphone(): Observable<any> {
  return this.http.get<Smartphone[]>(localUrl).pipe(
    catchError(this.handleError<Smartphone[]>('getSmartphone', [])));
}

Change the get data function in the component to this function.

getSmartphones() {
  this.api.getSmartphone()
    .subscribe(data => {
      console.log(data);
    });
}

Another way to handle the error is by using HttpInterceptor. To do that, create a new folder `src/app/interceptors` and an HttpErrorInterceptor file.

mkdir src/app/interceptors
touch src/app/interceptors/HttpErrorInterceptor.ts

Next, open and edit `src/app/interceptors/HttpErrorInterceptor.ts` then add these imports of RxJS Observable, throwError, catchError, tap, Angular Common Http HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, and HttpErrorResponse.

import { catchError, tap } from 'rxjs/internal/operators';
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';

Add these Typescript class that intercepts error from the HttpRequest.

@Injectable()
export class HttpErrorInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request)
      .pipe(
        tap(data => console.log(data)),
        catchError((error: HttpErrorResponse) => {
          if (error.error instanceof ErrorEvent) {
            // A client-side or network error occurred. Handle it accordingly.
            console.error('An error occurred:', error.error.message);
          } else {
            // The backend returned an unsuccessful response code.
            // The response body may contain clues as to what went wrong,
            console.error(
              `Backend returned code ${error.status}, ` +
              `body was: ${error.error}`);
          }
          // return an observable with a user-facing error message
          return throwError(
            'Something bad happened; please try again later.');
        })
      );
  }
}

Next, open and edit `src/app/app.module.ts` then add this import of Angular Common Http HttpInterceptor and HttpErrorInterceptor that previously created.

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { HttpErrorInterceptor } from './interceptors/HttpErrorInterceptor';

Add them to the @NgModule provider’s array.

providers: [
  {
    provide: HTTP_INTERCEPTORS,
    useClass: HttpErrorInterceptor,
    multi: true,
  }
],

You can use Retry function to retry the HttpRequest after an error is occurred to make sure the HTTP request is a real error. Add this function after the pipe function inside HttpErrorInterceptor or service function.

getSmartphone(): Observable<any> {
  return this.http.get<Smartphone[]>(localUrl).pipe(
    retry(3), catchError(this.handleError<Smartphone[]>('getSmartphone', [])));
}

Don’t forget to modify existing RxJS import.

import {catchError, retry} from 'rxjs/internal/operators';

Angular 8 REST API and HttpClient Examples

Angular HTTPHeaders

Almost in every HTTP requests including headers. Sometimes, REST API servers required additional headers parameters on every request. For example, the secured REST API endpoint only accessible with an Authorization header token, the specific REST API request use a different type of response by determining the type from the HTTP headers. To add the header to this HttpClient example, in the ApiService file add or modify this import of @angular/common/http HttpHeaders.

import { HttpHeaders } from '@angular/common/http';

Add a constant variable before the @Injectable that determine the HttpHeaders parameters.

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/xml',
    'Authorization': 'jwt-token'
  })
};

Add that httpOptions to the required HTTP request. In this example, modify the existing GET request.

getSmartphone(): Observable<any> {
  return this.http.get<Smartphone[]>(localUrl, httpOptions).pipe(
    retry(3), catchError(this.handleError<Smartphone[]>('getSmartphone', [])));
}

The HTTP request headers will look like this.

GET /assets/data/smartphone.json HTTP/1.1
Host: localhost:4200
Connection: keep-alive
Accept: application/json, text/plain, */*
Authorization: jwt-token
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36
Sec-Fetch-Mode: cors
Content-Type: application/json
Sec-Fetch-Site: same-origin
Referer: http://localhost:4200/
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,id;q=0.8
Cookie: _ga=GA1.1.257623774.1563284797; __atuvc=63%7C35%2C22%7C36%2C7%7C37%2C7%7C38%2C4%7C39
If-None-Match: W/"341-9uZs5GFl2K0WHOI2X11xYKnJlvM"

Because the instance of HttpHeaders class is immutable, we can modify HttpHeaders values directly.

getSmartphone(): Observable<any> {
  httpOptions.headers = httpOptions.headers.set('Authorization', 'my-new-auth-token');
  return this.http.get<Smartphone[]>(localUrl, httpOptions).pipe(
    retry(3), catchError(this.handleError<Smartphone[]>('getSmartphone', [])));
}

And here’s the headers change.

...
Authorization: my-new-auth-token
...

Angular 8 REST API and HttpClient Examples

HttpClient POST, PUT, and DELETE Request

To send data to the REST API is really simple with Angular HttpClient. Still, in the same API service file, add a function to POST data to the REST API.

addSmartphone(smartphone: Smartphone): Observable<Smartphone> {
  return this.http.post<Smartphone>(localUrl, smartphone, httpOptions)
    .pipe(
      catchError(this.handleError('addSmartphone', smartphone))
    );
}

Back to the Angular component, declare the data variable with a type and a variable for the response.

spresp: any;
postdata: Smartphone;

Add this function to perform POST data using ApiService.

addSmartphone() {
  this.api
    .addSmartphone(this.postdata)
    .subscribe(resp => {
      return this.spresp.push(resp);
    });
}

Where postdata variable is a typed object that populates from the Angular Form. To send data to the REST API for updating using the PUT method, add a function to PUT data to the REST API.

updateSmartphone(id: any, smartphone: Smartphone): Observable<Smartphone> {
  return this.http.put<Smartphone>(localUrl + id, smartphone, httpOptions)
    .pipe(
      catchError(this.handleError('addSmartphone', smartphone))
    );
}

Back to the Angular component, declare the data variable with a type and a variable for the response.

spresp: any;
postdata: Smartphone;

Add this function to perform POST data using ApiService.

updateSmartphone(id: any) {
 this.api
   .updateSmartphone(id, this.postdata)
   .subscribe(resp => {
     return this.spresp.push(resp);
   });
}

Where the ID variable is an ID of an object and postdata variable is a typed object that populates from the Angular Form after GET from the ApiService. To send data to REST API for deleting using the DELETE method, add a function to DELETE data to the REST API.

deleteSmartphone(id: any, smartphone: Smartphone): Observable<Smartphone> {
  return this.http.delete<Smartphone>(localUrl + id, httpOptions)
    .pipe(
      catchError(this.handleError('addSmartphone', smartphone))
    );
}

Add this function to perform DELETE data using ApiService.

deleteSmartphone(id: any) {
  this.api
    .deleteSmartphone(id)
    .subscribe(resp => {
      return this.spresp.push(resp);
    });
}

Where this function just required an ID of the Data that will be deleted.

Angular 8 REST API and HttpClient Examples

Angular HttpParams

We can add custom URL parameters using Angular HttpParams. Still, on the ApiService file, add this function of the HttpParams usage example.

getSmartphone(term: string): Observable<any> {
  term = term.trim();
  const options = term ? { params: new HttpParams().set('name', term) } : {};
  httpOptions.headers = httpOptions.headers.set('Authorization', 'my-new-auth-token');
  return this.http.get<Smartphone[]>(localUrl, options).pipe(
    retry(3), catchError(this.handleError<Smartphone[]>('getSmartphone', [])));
}

Don’t forget to add or modify the import of HttpParams.

import { HttpClient, HttpResponse, HttpErrorResponse, HttpParams } from '@angular/common/http';

Also, the HttpParams can be extracted from the string. Add this function to use get HttpParams from the string.

getSmartphone(): Observable<any> {
  const stringparams = 'name=iphone';
  const params = new HttpParams({fromString: stringparams});
  const options = { params };
  return this.http.get<Smartphone[]>(localUrl, options).pipe(
    retry(3), catchError(this.handleError<Smartphone[]>('getSmartphone', [])));
}

As you see, this tutorial of Angular HttpClient example did not cover all Angular HttpClient features and related. It just regular daily use of accessing or consume REST API server using Angular HttpClient. We will show you more examples for each advance features of the Angular HttpClient in a separate tutorial.

Source: DJAM

Angular 8 REST API and HttpClient Examples

Angular 8 REST API, HttpClient Examples, HttpClient, HttpClientModule, REST API Service in Angular 8, API Implementation in Angular, HttpClient POST, PUT, and DELETE Request, Setup Angular 8 HttpClient, Angular HttpClient Error Handling

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

How to Protect yourself from CovidVaccination saves lives at every stage of life
  • Clean your home regularly, particularly frequently touched surfaces like
  • Stay home stay safe. Follow the Golden Rule. Wash your hands frequently with soap and water or use alchohol based hand-rub.
  • Stay home stay safe. Stay physically fit. Exercise regulary. Eat a nutritious diet. Don’t smoke.
  • Stay home stay safe. If you show symptoms of COVID-19, self isolate yourself, wear a mask around others and seek medical advice