How to make POST requests in Angular
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Making POST requests in Angular with HttpClient enables sending data to REST APIs for creating resources, form submissions, and data synchronization. With over 25 years of experience in software development and as the creator of CoreUI, I’ve implemented POST request patterns extensively in form handling, user registration, and data creation workflows. From my expertise, the most effective approach is using HttpClient service with proper request body formatting, headers configuration, and comprehensive error handling. This pattern ensures reliable data submission and proper server communication in enterprise Angular applications.
Use HttpClient service to make POST requests with request bodies and proper headers for reliable data submission.
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http'
import { Injectable } from '@angular/core'
import { Observable, throwError } from 'rxjs'
import { catchError } from 'rxjs/operators'
interface User {
id?: number
name: string
email: string
}
interface CreateUserRequest {
name: string
email: string
}
@Injectable({
providedIn: 'root'
})
export class UserService {
private apiUrl = 'https://api.example.com/users'
constructor(private http: HttpClient) {}
createUser(userData: CreateUserRequest): Observable<User> {
const headers = new HttpHeaders({
'Content-Type': 'application/json'
})
return this.http.post<User>(this.apiUrl, userData, { headers })
.pipe(
catchError(this.handleError)
)
}
updateUser(id: number, userData: Partial<User>): Observable<User> {
return this.http.post<User>(`${this.apiUrl}/${id}`, userData)
.pipe(
catchError(this.handleError)
)
}
uploadFile(file: File): Observable<any> {
const formData = new FormData()
formData.append('file', file)
return this.http.post(`${this.apiUrl}/upload`, formData)
.pipe(
catchError(this.handleError)
)
}
private handleError(error: HttpErrorResponse) {
console.error('POST request failed:', error)
return throwError(() => new Error('Failed to submit data'))
}
}
Here HttpClient.post<T>() makes POST requests with the request body as the second parameter. The headers option sets Content-Type and other HTTP headers, while TypeScript interfaces ensure type safety for request and response data. FormData enables file uploads, and the pipe operator chains error handling for robust request management.
Best Practice Note:
This is the same approach we use in CoreUI Angular applications for form submissions, data creation, and file uploads in enterprise environments. Always validate data before sending POST requests and implement proper error handling to provide meaningful feedback to users when submissions fail.
