Angular12 min read

HTTP POST: Send Data to the Backend

Send data to APIs using HttpClient.post with clean error handling patterns.

Victoria Nguyen
December 21, 2025
0.0k0

Posting data is how you create users, save forms, submit orders, and more. ## Create an API method ```ts import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; export type CreateUserRequest = { name: string; email: string }; export type CreateUserResponse = { id: string }; @Injectable({ providedIn: 'root' }) export class UsersApi { constructor(private http: HttpClient) {} createUser(payload: CreateUserRequest): Observable<CreateUserResponse> { return this.http.post<CreateUserResponse>('/api/users', payload); } } ``` ## Use it on submit ```ts submit() { if (this.form.invalid) return; const payload = { name: this.form.controls.name.value, email: this.form.controls.email.value, }; this.api.createUser(payload).subscribe({ next: res => console.log('Created user:', res.id), error: err => console.error('Create failed:', err), }); } ``` ## Pro tip Keep API calls inside services, not directly in templates. > Next: HTTP interceptors for auth tokens and logging.

#Angular#HTTP#Intermediate