A Complete Guide - Angular Making HTTP Calls with HttpClient

Angular Making HTTP Calls with HttpClient: Detailed Explanation and Important Information

Setting Up HttpClient

Before you can use HttpClient, you need to import it into your Angular application. This is typically done in the AppModule or a specific feature module. Here is how to import and configure it:

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

// In your app module import the HttpClientModule
@NgModule({
  declarations: [...],
  imports: [
    BrowserModule,
    HttpClientModule,  // Add HttpClientModule here
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Basic HTTP Calls

With HttpClient imported, you can make HTTP requests. Here’s how to make simple GET, POST, PUT, and DELETE requests:

// Import HttpClient from Angular core
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class DataService {
  private apiUrl = '

  constructor(private http: HttpClient) {}

  // GET request
  getData() {
    return this.http.get<any[]>(`${this.apiUrl}`);
  }

  // POST request
  postData(item: any) {
    return this.http.post<any>(`${this.apiUrl}`, item);
  }

  // PUT request
  putData(id: number, updatedItem: any) {
    return this.http.put<any>(`${this.apiUrl}/${id}`, updatedItem);
  }

  // DELETE request
  deleteData(id: number) {
    return this.http.delete<any>(`${this.apiUrl}/${id}`);
  }
}

Handling Responses

Angular’s HttpClient methods return Observable objects, making it easy to handle responses using RxJS operators. Here’s how to subscribe to the observables returned from these methods:

import { Observable } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

// Component or another service that uses DataService
@Component({ ... })
export class MyComponent {
  data: any[] = [];

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getData()
      .subscribe(
        (response: any[]) => {
          this.data = response;
        },
        error => {
          console.error('There was an error!', error);
        }
      );
  }
}

Interceptors

Interceptors are powerful tools in Angular for modifying HTTP requests and responses globally. You can use them for tasks like adding authentication headers or intercepting errors.

Here’s an example of intercepting a request to add an Authorization header:

1. Create an Interceptor

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

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = localStorage.getItem('auth_token');

    if (token) {
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${token}`
        }
      });
    }
    
    return next.handle(request);
  }
}

2. Register the Interceptor

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

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

Error Handling

Proper error handling is crucial when working with HTTP requests. Use RxJS operators such as catchError to handle errors gracefully.

import { throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

public getRequestFailed() {
  return this.http.get('
    .pipe(
      catchError(this.handleError)
    );
}

private handleError(error: any) {
  // Log the error to console
  console.error('Server Error:', error);

  // Throw an error observable
  return throwError('Server Error');
}

Summary

Angular’s HttpClient module offers an efficient and robust way to work with HTTP in Angular applications. Setting up HttpClient, making HTTP requests, handling responses, using interceptors, and managing errors are key to leveraging HttpClient effectively. By following these practices, you can create robust and maintainable Angular applications that smoothly interact with backend services.