How to make GET requests in Angular
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Making GET requests in Angular with HttpClient enables efficient data fetching from REST APIs with observable-based patterns and comprehensive error handling. As the creator of CoreUI with over 11 years of Angular development experience, I’ve implemented countless GET request patterns in enterprise applications and data-driven interfaces. From my expertise, the most reliable approach is using HttpClient service with proper type safety, error handling, and observable operators for robust API communication. This pattern provides the foundation for all data retrieval operations in modern Angular applications.
Use HttpClient service to make GET requests with observables and proper error handling for reliable data fetching.
import { HttpClient, HttpParams, HttpErrorResponse } from '@angular/common/http'
import { Injectable } from '@angular/core'
import { Observable, throwError } from 'rxjs'
import { catchError, map, retry } from 'rxjs/operators'
interface User {
id: number
name: string
email: string
}
@Injectable({
providedIn: 'root'
})
export class UserService {
private apiUrl = 'https://api.example.com/users'
constructor(private http: HttpClient) {}
getUsers(): Observable<User[]> {
return this.http.get<User[]>(this.apiUrl)
.pipe(
retry(2),
catchError(this.handleError)
)
}
getUserById(id: number): Observable<User> {
return this.http.get<User>(`${this.apiUrl}/${id}`)
.pipe(
catchError(this.handleError)
)
}
searchUsers(query: string): Observable<User[]> {
const params = new HttpParams().set('search', query)
return this.http.get<User[]>(this.apiUrl, { params })
.pipe(
map(response => response),
catchError(this.handleError)
)
}
private handleError(error: HttpErrorResponse) {
console.error('GET request failed:', error)
return throwError(() => new Error('Failed to fetch data'))
}
}
Here HttpClient.get<T>() makes GET requests with TypeScript type safety using generic types. The params option adds query parameters, and the pipe() method chains operators like retry() for automatic retries and catchError() for error handling. The service returns observables that components can subscribe to for reactive data updates.
Best Practice Note:
This is the same approach we use in CoreUI Angular applications for all data fetching operations, ensuring consistent error handling and type safety across enterprise systems. Always define interfaces for API response types and implement proper error handling to create robust, maintainable data access layers.
