# Angular Http

> Angular HTTP client patterns with HttpClient, two-layer architecture (API Client returns Observable, Repository wraps with Result), error handling, and DTO conventions. Use when creating API clients, handling HTTP requests, or implementing repository adapters.

- **Type:** Skill
- **Install:** `agentstack add skill-cuongtl1992-vibe-skills-angular-http`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [cuongtl1992](https://agentstack.voostack.com/s/cuongtl1992)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [cuongtl1992](https://github.com/cuongtl1992)
- **Source:** https://github.com/cuongtl1992/vibe-skills/tree/main/skills/frontend/angular-http

## Install

```sh
agentstack add skill-cuongtl1992-vibe-skills-angular-http
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Angular HTTP Patterns

Two-layer pattern: API Client (Observable) → Repository (Result).

## API Client Layer

Returns `Observable` — no Result wrapping here:

```typescript
import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable, inject } from '@angular/core';
import { Observable, catchError, throwError } from 'rxjs';

@Injectable()
export class EntityApiClient {
  private readonly http = inject(HttpClient);
  private readonly baseUrl = inject(API_BASE_URL);

  findAll(params?: HttpParams): Observable {
    return this.http.get(
      `${this.baseUrl}/entities`, { params }
    ).pipe(
      catchError(error => throwError(() => new Error(this.extractError(error))))
    );
  }

  create(payload: CreateEntityRequest): Observable {
    return this.http.post(
      `${this.baseUrl}/entities`, payload
    ).pipe(
      catchError(error => throwError(() => new Error(this.extractError(error))))
    );
  }

  private extractError(error: unknown): string {
    if (error instanceof Error) return error.message;
    if (typeof error === 'object' && error !== null && 'error' in error) {
      const httpError = error as { error?: { message?: string } };
      return httpError.error?.message ?? 'Request failed';
    }
    return 'Unknown error';
  }
}
```

## Repository Layer

Wraps API calls with `Result` using `firstValueFrom`:

```typescript
import { firstValueFrom } from 'rxjs';

@Injectable()
export class EntityRepositoryImpl implements EntityRepository {
  private readonly apiClient = inject(EntityApiClient);

  async find(params: FilterParams): Promise>> {
    try {
      const response = await firstValueFrom(this.apiClient.findAll(this.buildParams(params)));
      return Result.success({
        data: response.data.map(EntityMapper.toDomain),
        total: response.total,
      });
    } catch (error: unknown) {
      return Result.failure(error instanceof Error ? error.message : 'Unknown error');
    }
  }

  async create(params: CreateEntityParams): Promise> {
    try {
      const response = await firstValueFrom(
        this.apiClient.create(EntityMapper.toCreateDto(params))
      );
      return Result.success(EntityMapper.toDomain(response.data));
    } catch (error: unknown) {
      return Result.failure(error instanceof Error ? error.message : 'Failed to create');
    }
  }
}
```

## Key Rules

- API Client returns `Observable`, NOT `Result`
- Repository uses `firstValueFrom()` to convert Observable → Promise
- Every API client method has `catchError` with error extraction
- All repository methods return `Promise>`
- Never expose raw HTTP errors to consumers

For detailed patterns, see [references/http-patterns.md](references/http-patterns.md).

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [cuongtl1992](https://github.com/cuongtl1992)
- **Source:** [cuongtl1992/vibe-skills](https://github.com/cuongtl1992/vibe-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** yes
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-cuongtl1992-vibe-skills-angular-http
- Seller: https://agentstack.voostack.com/s/cuongtl1992
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.