HTTP POST: Send Data to the Backend

Posting data is how you create users, save forms, submit orders, and more.

Create an API method

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

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.