Angular HTTP Client

What is the HTTP Client in Angular?

The HTTP Client in Angular is a service provided by the HttpClientModule that enables communication with remote servers via HTTP. It allows you to make HTTP requests (such as GET, POST, PUT, DELETE) and receive responses. The HttpClient service is built on top of the XMLHttpRequest interface and provides a more powerful, easy-to-use, and feature-rich API for handling HTTP requests and responses, including observables, request interceptors, and error handling.

How do you set up the HTTP Client in Angular?

To use the HttpClient in Angular, you need to import the HttpClientModule in your application module and inject the HttpClient service into your component or service.

Steps to set up the HTTP Client:

1. Import HttpClientModule in your application module.
2. Inject the HttpClient service into your component or service where you want to make HTTP requests.

Example of setting up HTTP Client:

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

@NgModule({
  imports: [HttpClientModule],
})
export class AppModule { }

Once the HttpClientModule is imported, you can inject HttpClient into your service:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'https://api.example.com/data';

  constructor(private http: HttpClient) {}

  getData(): Observable<any> {
    return this.http.get(this.apiUrl);
  }
}

In this example, the HttpClient service is injected into the DataService and used to make a GET request to the API.

How do you make a GET request using the HttpClient in Angular?

To make a GET request using the HttpClient, you use the get() method of the HttpClient service. The get() method takes the URL of the resource as an argument and returns an observable that emits the response from the server.

Example of making a GET request:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'https://api.example.com/data';

  constructor(private http: HttpClient) {}

  getData(): Observable<any> {
    return this.http.get(this.apiUrl);
  }
}

In this example, the getData() method makes a GET request to the specified apiUrl and returns an observable that the component can subscribe to in order to retrieve the data.

How do you make a POST request using the HttpClient in Angular?

To make a POST request using the HttpClient, you use the post() method of the HttpClient service. The post() method takes the URL of the resource and the payload (data) to be sent to the server as arguments.

Example of making a POST request:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'https://api.example.com/data';

  constructor(private http: HttpClient) {}

  createData(data: any): Observable<any> {
    return this.http.post(this.apiUrl, data);
  }
}

In this example, the createData() method makes a POST request to the apiUrl and sends the provided data as the request body.

How do you send headers with an HTTP request in Angular?

To send headers with an HTTP request in Angular, you can use the HttpHeaders class to define custom headers and pass them as an options object when making the request.

Example of sending headers with an HTTP request:

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'https://api.example.com/data';

  constructor(private http: HttpClient) {}

  getData(): Observable<any> {
    const headers = new HttpHeaders({
      'Authorization': 'Bearer token',
      'Custom-Header': 'CustomValue'
    });

    return this.http.get(this.apiUrl, { headers });
  }
}

In this example, custom headers are created using the HttpHeaders class and passed as part of the request options when making the GET request.

How do you handle errors in HTTP requests using the HttpClient in Angular?

To handle errors in HTTP requests in Angular, you can use the catchError operator from RxJS within the observable stream. The catchError operator allows you to catch errors and return a user-friendly error or retry the request.

Example of handling errors in an HTTP request:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'https://api.example.com/data';

  constructor(private http: HttpClient) {}

  getData(): Observable<any> {
    return this.http.get(this.apiUrl).pipe(
      catchError(error => {
        console.error('Error occurred:', error);
        return throwError('Something went wrong, please try again later.');
      })
    );
  }
}

In this example, the catchError operator is used to catch any errors that occur during the GET request. The error is logged, and a user-friendly error message is returned using the throwError function.

What is an interceptor in Angular, and how is it used with the HttpClient?

An HTTP interceptor in Angular is a service that allows you to intercept and modify HTTP requests or responses before they are sent or processed. Interceptors are typically used to add authentication tokens, log requests, or modify headers. Interceptors are implemented by providing a service that implements the HttpInterceptor interface.

Example of an HTTP interceptor:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authReq = req.clone({
      headers: req.headers.set('Authorization', 'Bearer token')
    });

    return next.handle(authReq);
  }
}

To register the interceptor, you add it to the list of providers in your application module:

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

@NgModule({
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
  ]
})
export class AppModule { }

In this example, the AuthInterceptor adds an authorization header to every outgoing HTTP request.

How do you perform query parameters in HTTP requests using the HttpClient?

To send query parameters in HTTP requests using Angular's HttpClient, you can use the HttpParams class to create and pass the parameters as part of the request options.

Example of sending query parameters:

import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'https://api.example.com/data';

  constructor(private http: HttpClient) {}

  getDataWithParams(): Observable<any> {
    const params = new HttpParams()
      .set('page', '1')
      .set('limit', '10');

    return this.http.get(this.apiUrl, { params });
  }
}

In this example, query parameters page and limit are added to the request using the HttpParams class and passed in the GET request options.

How do you make parallel HTTP requests in Angular?

To make parallel HTTP requests in Angular, you can use RxJS's forkJoin function, which allows you to combine multiple observables and execute them in parallel. Once all observables complete, forkJoin emits the combined results as an array.

Example of making parallel HTTP requests:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, forkJoin } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl1 = 'https://api.example.com/data1';
  private apiUrl2 = 'https://api.example.com/data2';

  constructor(private http: HttpClient) {}

  getDataFromBothApis(): Observable<any[]> {
    return forkJoin([
      this.http.get(this.apiUrl1),
      this.http.get(this.apiUrl2)
    ]);
  }
}

In this example, two HTTP GET requests are made in parallel using forkJoin. When both requests complete, the combined results are emitted as an array.

What is HttpParams, and how is it used in Angular?

HttpParams is a class in Angular that represents query parameters in an HTTP request. It is used to append, set, or delete query parameters in requests made via HttpClient.

Example of using HttpParams:

import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'https://api.example.com/data';

  constructor(private http: HttpClient) {}

  getDataWithParams(): Observable<any> {
    const params = new HttpParams().set('search', 'Angular').set('page', '1');
    return this.http.get(this.apiUrl, { params });
  }
}

In this example, HttpParams is used to append query parameters search and page to the request.