How to fetch data in Angular with HttpClient
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Fetching data in Angular with HttpClient provides a powerful, observable-based approach for making HTTP requests and handling API responses efficiently. With over 25 years of experience in software development and as the creator of CoreUI, I’ve implemented countless data fetching solutions in Angular applications and enterprise systems. From my expertise, the most reliable approach is using HttpClient service with proper error handling and observable patterns for robust API communication. This service integrates seamlessly with Angular’s dependency injection and provides comprehensive HTTP functionality with built-in interceptors and type safety.
Use HttpClient service with observables to make HTTP requests and handle API responses with proper error management.
import { HttpClient, HttpErrorResponse } from '@angular/common/http'
import { Injectable } from '@angular/core'
import { Observable, throwError } from 'rxjs'
import { catchError, map } from 'rxjs/operators'
@Injectable({
providedIn: 'root'
})
export class DataService {
private apiUrl = 'https://api.example.com'
constructor(private http: HttpClient) {}
getUsers(): Observable<any[]> {
return this.http.get<any[]>(`${this.apiUrl}/users`)
.pipe(
map(response => response),
catchError(this.handleError)
)
}
getUserById(id: number): Observable<any> {
return this.http.get<any>(`${this.apiUrl}/users/${id}`)
.pipe(
catchError(this.handleError)
)
}
private handleError(error: HttpErrorResponse) {
console.error('An error occurred:', error.error)
return throwError(() => new Error('Something bad happened; please try again later.'))
}
}
Here HttpClient is injected into the service constructor, and this.http.get() makes GET requests that return observables. The pipe() method chains operators like map() for data transformation and catchError() for error handling. The generic type <any[]> provides type safety for the response. The service pattern centralizes API logic and can be injected into components for data access.
Best Practice Note:
This is the same approach we use in CoreUI Angular applications for all API communication, data management, and service integration in enterprise environments. Always implement proper error handling, use TypeScript interfaces for response types, and consider implementing retry logic for production applications.
