Typed HTTP Service — Complete API Client Pattern

A complete typed API client service encapsulates all HTTP communication for a domain, exposes a clean Observable-based API, and handles the mapping between HTTP responses and application models. When structured correctly, components never touch HttpClient directly — they only call service methods. This keeps HTTP concerns (URLs, headers, params, error parsing) in one place, making the application easier to test and evolve as the API changes.

Complete PostsApiService #

@Injectable({ providedIn: 'root' })
export class PostsApiService {
  private http    = inject(HttpClient);
  private baseUrl = inject(API_BASE_URL);
  private url     = (path: string) => `${this.baseUrl}/api${path}`;

  // ── READ ──────────────────────────────────────────────────────────────
  getPublished(params: PostQueryParams = {}): Observable<PagedResult<PostSummaryDto>> {
    return this.http.get<PagedResult<PostSummaryDto>>(this.url('/posts'), {
      params: this.buildParams(params),
    });
  }

  getBySlug(slug: string): Observable<PostDto> {
    return this.http.get<PostDto>(this.url(`/posts/by-slug/${slug}`));
  }

  getById(id: number): Observable<PostDto> {
    return this.http.get<PostDto>(this.url(`/posts/${id}`));
  }

  // ── WRITE ─────────────────────────────────────────────────────────────
  create(request: CreatePostRequest): Observable<PostDto> {
    return this.http.post<PostDto>(this.url('/posts'), request);
  }

  update(id: number, request: UpdatePostRequest): Observable<PostDto> {
    return this.http.patch<PostDto>(this.url(`/posts/${id}`), request);
  }

  publish(id: number): Observable<PostDto> {
    return this.http.post<PostDto>(this.url(`/posts/${id}/publish`), {});
  }

  delete(id: number): Observable<void> {
    return this.http.delete<void>(this.url(`/posts/${id}`));
  }

  // ── Error parsing — ValidationProblemDetails → Angular form errors ────
  parseValidationErrors(error: HttpErrorResponse): Record<string, string[]> {
    if (error.status === 400 && error.error?.errors) {
      // ASP.NET Core ValidationProblemDetails format:
      // { errors: { "title": ["Required"], "slug": ["Already taken"] } }
      return error.error.errors as Record<string, string[]>;
    }
    return {};
  }

  // ── Private helpers ───────────────────────────────────────────────────
  private buildParams(query: PostQueryParams): HttpParams {
    let params = new HttpParams();
    if (query.page)     params = params.set('page',     query.page);
    if (query.size)     params = params.set('size',     query.size);
    if (query.search)   params = params.set('search',   query.search);
    if (query.category) params = params.set('category', query.category);
    if (query.sort)     params = params.set('sort',     query.sort);
    return params;
  }
}

// ── Component using the service with error parsing ────────────────────────
@Component({ standalone: true, template: '...' })
export class PostFormComponent {
  private api  = inject(PostsApiService);
  form         = inject(FormBuilder).nonNullable.group({
    title: ['', Validators.required],
    slug:  ['', Validators.required],
    body:  ['', Validators.required],
  });
  isSaving = signal(false);
  serverError = signal('');

  onSubmit(): void {
    if (this.form.invalid) return;
    this.isSaving.set(true);

    this.api.create(this.form.getRawValue()).subscribe({
      next:  post => {
        this.isSaving.set(false);
        // Navigate to the new post
      },
      error: (err: HttpErrorResponse) => {
        this.isSaving.set(false);
        const fieldErrors = this.api.parseValidationErrors(err);
        // Set server-side errors on individual form controls
        Object.entries(fieldErrors).forEach(([field, messages]) => {
          this.form.get(field)?.setErrors({ serverError: messages[0] });
        });
        if (!Object.keys(fieldErrors).length) {
          this.serverError.set(err.error?.title ?? 'An error occurred.');
        }
      },
    });
  }
}

Common Mistakes #

Mistake 1 — Hardcoding API URLs in multiple services (fragile, hard to update) #

❌ Wrong — http.get('https://api.blogapp.com/api/posts') repeated in every service method.

✅ Correct — inject API_BASE_URL token once per service; use a url(path) helper for consistency.

Mistake 2 — Ignoring 400 validation errors from the server (form shows no field errors) #

❌ Wrong — catching all errors with a generic message; specific field validation errors from the API never shown.

✅ Correct — parse error.error.errors and set them on the corresponding form controls.