angular · alxhub · Jul 29, 2026 · Jul 7, 2026 · Jul 21, 2026
diff --git a/skills/dev-skills/README.md b/skills/dev-skills/README.md
@@ -4,7 +4,7 @@ The Angular skills are designed to help coding agents create applications aligne
 
 ## Available Skills
 
-- **`angular-developer`**: Generates Angular code and provides architectural guidance. Useful for creating components, services, or obtaining best practices on reactivity (signals, linkedSignal, resource), forms, dependency injection, routing, SSR, accessibility (ARIA), animations, styling, testing, or CLI tooling.
+- **`angular-developer`**: Generates Angular code and provides architectural guidance. Useful for creating components, services, HTTP communication, or obtaining best practices on reactivity (signals, linkedSignal, resource, httpResource), forms, dependency injection, routing, SSR, accessibility (ARIA), animations, styling, testing, or CLI tooling.
 - **`angular-new-app`**: Creates a new Angular app using the Angular CLI. Provides important guidelines for effectively setting up and structuring a modern Angular application.
 
 ## Using Agent Skills

diff --git a/skills/dev-skills/angular-developer/SKILL.md b/skills/dev-skills/angular-developer/SKILL.md
@@ -1,6 +1,6 @@
 ---
 name: angular-developer
-description: Generates Angular code and provides architectural guidance. Trigger when creating projects, components, or services, or for best practices on reactivity (signals, linkedSignal, resource), forms, dependency injection, routing, SSR, accessibility (ARIA), animations, styling (component styles, Tailwind CSS), testing, or CLI tooling.
+description: Generates Angular code and provides architectural guidance. Trigger when creating projects, components, services, or HTTP communication, or for best practices on reactivity (signals, linkedSignal, resource, httpResource), forms, dependency injection, routing, SSR, accessibility (ARIA), animations, styling (component styles, Tailwind CSS), testing, or CLI tooling.
 license: MIT
 metadata:
   author: Copyright 2026 Google LLC
@@ -61,6 +61,12 @@ When managing state and data reactivity, use Angular Signals and consult the fol
 - **Async Reactivity (`resource`)**: Fetching asynchronous data directly into signal state. Read [resource.md](references/resource.md)
 - **Side Effects (`effect`)**: Logging, third-party DOM manipulation (`afterRenderEffect`), and when NOT to use effects. Read [effects.md](references/effects.md)
 
+## HTTP Communication
+
+When communicating with backend services, use Angular HTTP APIs and consult the following reference:
+
+- **HTTP Client and Resources**: `provideHttpClient`, `HttpClient`, interceptors, and `httpResource`. Read [http-client.md](references/http-client.md)
+
 ## Forms
 
 In most cases for new apps, **prefer signal forms**. When making a forms decision, analyze the project and consider the following guidelines:

diff --git a/skills/dev-skills/angular-developer/references/http-client.md b/skills/dev-skills/angular-developer/references/http-client.md
@@ -0,0 +1,108 @@
+# HTTP communication with `HttpClient` and `httpResource`
+
+Use Angular's HTTP APIs for backend communication so requests participate in dependency injection, interceptors, transfer cache, and security features.
+
+## Setup
+
+In Angular v21 and later, `HttpClient` is available for injection by default. Add `provideHttpClient(...)` only when an app needs to configure HTTP features for a specific injector:
+
+```ts
+import {provideHttpClient, withInterceptors} from '@angular/common/http';
+
+export const appConfig = {
+  providers: [provideHttpClient(withInterceptors([authInterceptor]))],
+};
+```
+
+- `HttpClient` uses the fetch backend by default.
+- Use `withXhr()` only when upload progress events are required. Do not use `withXhr()` for server-side rendering.
+- Use `provideHttpClient(...)` for feature configuration such as interceptors, XSRF options, XHR, or parent-request delegation.
+- Calling `provideHttpClient()` with no features is not required for basic HTTP requests, but it configures the default HTTP feature set for that injector, including Angular's XSRF interceptor.
+- Prefer `provideHttpClient(...)` over `HttpClientModule` for feature configuration, especially with multiple injectors.
+- Use `withRequestsMadeViaParent()` when a child injector should add interceptors while still delegating to the parent HTTP chain.
+
+## `HttpClient`
+
+Encapsulate backend calls in injectable services, not components:
+
+```ts
+import {HttpClient} from '@angular/common/http';
+import {Service, inject} from '@angular/core';
+
+@Service()
+export class UserService {
+  private readonly http = inject(HttpClient);
+
+  getUser(id: string) {
+    return this.http.get<User>(`/api/users/${id}`);
+  }
+}
+```
+
+Important rules:
+
+- `HttpClient` requests are cold `Observable`s. No request is sent until the `Observable` is subscribed to. Multiple subscriptions send multiple backend requests.
+- Subscribe to mutation requests (`post`, `put`, `patch`, `delete`) so they execute.
+- The generic type parameter is a type assertion only. Validate unknown backend data at runtime when the shape is not trusted.
+- Use literal values for `responseType` and `observe`; if options are extracted, write values like `responseType: 'text' as const`.
+- `HttpHeaders` and `HttpParams` are immutable; use the returned instance from `.set()` or `.append()`.
+- Fetch options such as `timeout`, `cache`, `priority`, `mode`, `redirect`, `credentials`, `keepalive`, `referrer`, `referrerPolicy`, and `integrity` are supported where the backend supports them. `withCredentials: true` overrides `credentials`.
+- Handle failures through `HttpErrorResponse`. Network and timeout failures use status `0`; backend failures use the server status code.
+- Prefer the `async` pipe or `toSignal` for component reads so subscriptions are cleaned up.
+
+## Interceptors
+
+Prefer functional interceptors configured with `withInterceptors`.
+
+```ts
+import {
+  HttpHandlerFn,
+  HttpRequest,
+  provideHttpClient,
+  withInterceptors,
+} from '@angular/common/http';
+
+export function authInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn) {
+  return next(req.clone({setHeaders: {Authorization: 'Bearer token'}}));
+}
+
+export const appConfig = {
+  providers: [provideHttpClient(withInterceptors([authInterceptor]))],
+};
+```
+
+- Interceptors run in the order listed.
+- Request and response objects are mostly immutable; clone before changing them.
+- Request and response bodies are not deeply immutable. Avoid in-place body mutation because retries can run the same interceptor again.
+- Use `inject()` inside functional interceptors for services.
+- Use `HttpContextToken` for per-request metadata that interceptors need but the backend should not receive.
+- Use DI-based interceptors only for existing code, and enable them with `withInterceptorsFromDi()`.
+
+## Security
+
+- `HttpClient` strips the XSSI prefix from JSON responses when present.
+- `provideHttpClient()` configures XSRF protection by default for mutating relative and same-origin requests. It reads the `XSRF-TOKEN` cookie and sends the `X-XSRF-TOKEN` header.
+- The backend must set the XSRF cookie and verify the header. Customize names with `withXsrfConfiguration(...)`; disable only deliberately with `withNoXsrfProtection()`.
+
+## `httpResource`
+
+Use `httpResource` to create an asynchronous derivation that fetches data over HTTP and exposes the result as reactive signals.
+
+```ts
+import {httpResource} from '@angular/common/http';
+import {input} from '@angular/core';
+
+export class UserProfile {
+  readonly userId = input.required<string>();
+  readonly user = httpResource(() => `/api/users/${this.userId()}`);
+}
+```
+
+- `httpResource` is eager. It sends a request when its reactive request computation runs, not when an `Observable` is subscribed.
+- When a dependency changes, it cancels the pending request and sends the next one.
+- Return `undefined` from the request function to skip a backend request.
+- Prefer `httpResource` for reads. Use `HttpClient` directly for mutations such as `POST`, `PUT`, `PATCH`, and `DELETE`.
+- Guard `value()` reads with `hasValue()`; reading `value()` while the resource is in an error state throws.
+- Use `httpResource.text`, `httpResource.blob`, or `httpResource.arrayBuffer` for non-JSON responses.
+- Use the `parse` option to validate or transform responses with a runtime schema.
+- Read `headers()`, `statusCode()`, and `progress()` when response metadata or download progress is needed. Set `reportProgress: true` for progress events.