playbooks

home / skills / pluginagentmarketplace / custom-plugin-angular / http-client

http-client skill

/skills/http-client

This skill helps you master Angular HttpClient usage for API calls, interceptors, and robust error handling across components.

npx playbooks add skill pluginagentmarketplace/custom-plugin-angular --skill http-client

Review the files below or copy the command above to add this skill to your agents.

Files (6)
SKILL.md
1.2 KB
---
name: http-client
description: Angular HttpClient for API communication, interceptors, and error handling
sasmp_version: "1.3.0"
bonded_agent: 02-angular-core
bond_type: PRIMARY_BOND
---

# Angular HTTP Client Skill

## Overview
Master Angular's HttpClient module for making HTTP requests, handling responses, implementing interceptors, and managing API communication patterns.

## Topics Covered

### HttpClient Basics
- GET, POST, PUT, DELETE requests
- Request and response typing
- Query parameters and headers
- Response body parsing

### Interceptors
- HTTP interceptor creation
- Authentication token injection
- Request/response transformation
- Error handling interceptors
- Loading state management

### Error Handling
- HttpErrorResponse handling
- Retry strategies with RxJS
- Global error handling
- User-friendly error messages

### Advanced Patterns
- Request cancellation
- File upload/download
- Progress tracking
- Caching strategies
- API service design

## Prerequisites
- Angular Core fundamentals
- TypeScript basics
- RxJS Observables understanding

## Learning Outcomes
- Create type-safe API services
- Implement authentication interceptors
- Handle errors gracefully
- Build reusable HTTP patterns

Overview

This skill teaches practical use of Angular's HttpClient for robust API communication, including request types, typed responses, and response parsing. It covers building API services, using interceptors for authentication and transformation, and implementing error handling and retry strategies. The material emphasizes reusable patterns for production-ready HTTP layers in Angular apps.

How this skill works

The skill walks through creating type-safe HttpClient calls (GET, POST, PUT, DELETE), configuring headers and query parameters, and parsing response bodies into TypeScript models. It explains how to implement HttpInterceptors to inject auth tokens, transform requests/responses, track loading state, and centralize error handling. Advanced topics show request cancellation, file upload/download with progress, RxJS-based retries, and simple caching patterns.

When to use it

  • Building Angular services that consume RESTful APIs with type safety
  • Adding authentication token injection and centralized request logic
  • Implementing global error handling and retry policies for unreliable networks
  • Uploading or downloading files with progress reporting
  • Optimizing repeated requests with simple caching or cancellation

Best practices

  • Type all request and response payloads with TypeScript interfaces to catch errors early
  • Centralize token handling and error logic in interceptors to avoid duplication
  • Use RxJS operators (retry, catchError, takeUntil) for retries and request cancellation
  • Expose small, focused API service methods that compose HttpClient calls, not large monolithic services
  • Emit user-friendly error messages and log detailed errors for diagnostics

Example use cases

  • Create an AuthInterceptor that reads a JWT from storage and adds an Authorization header to outgoing requests
  • Build a ProductService with typed endpoints: listProducts(), getProduct(id), createProduct(payload)
  • Implement a retry strategy with exponential backoff for intermittent network failures
  • Add a FileUploadService that reports upload progress and supports canceling the upload
  • Cache GET responses for short-lived lists to reduce API calls and improve perceived performance

FAQ

How do I test services that use HttpClient?

Use Angular's HttpClientTestingModule and HttpTestingController to mock HTTP requests and assert the outgoing URL, method, headers, and response handling.

Where should interceptors be registered?

Register interceptors in the app module providers using multi: true so they run for every HttpClient request across the app.