HTTP Resource Plugin

Generate Angular services using the httpResource API for automatic caching, state management, and reactive data loading.

Overview

The HTTP Resource plugin extends ng-openapi to generate services that leverage Angular's new httpResource API instead of traditional HttpClient. This provides built-in caching, loading states, error handling, and reactive updates through Angular Signals.

Installation

Install the plugin alongside ng-openapi:

npm install ng-openapi @ng-openapi/http-resource --save-dev

Configuration

Add the plugin to your OpenAPI configuration:

// openapi.config.ts
import { GeneratorConfig } from "ng-openapi";
import { HttpResourcePlugin } from "@ng-openapi/http-resource";

export default {
    input: "./swagger.json",
    output: "./src/api",
    clientName: "MyApi",
    plugins: [HttpResourcePlugin],
    options: {
        dateType: "Date",
        enumStyle: "enum",
    },
} as GeneratorConfig;

Generation

Generate your API resources:

ng-openapi -c openapi.config.ts

This creates both traditional services and HTTP resource services:

src/api/
├── models/           # TypeScript interfaces
├── services/         # Traditional HttpClient services
├── resources/        # HTTP Resource services
│   ├── index.ts      # Resource exports
│   └── *.resource.ts # Generated resources
├── providers.ts      # Provider functions
└── index.ts         # Main exports

Provider Setup

Configure the provider in your application:

// app.config.ts
import { ApplicationConfig } from "@angular/core";
import { provideMyApiClient } from "./api/providers";

export const appConfig: ApplicationConfig = {
    providers: [
        provideMyApiClient({
            basePath: "https://api.example.com",
        }),
    ],
};

Basic Usage

Inject and use the generated resources in your components:

import { Component, inject } from "@angular/core";
import { UsersResource } from "./api/resources";

@Component({
    selector: "app-users",
    template: `
        <div>
            @if (users.isLoading()) {
                <p>Loading users...</p>
            } @else if (users.error()) {
                <p>Error: {{ users.error()?.message }}</p>
            } @else {
                @for (user of users.value(); track user.id) {
                    <div>{{ user.name }}</div>
                }
            }
        </div>
    `,
})
export class UsersComponent {
    private readonly usersResource = inject(UsersResource);

    readonly users = this.usersResource.getUsers();
}

Dynamic Parameters

Use Signals for reactive parameter binding:

export class UserDetailComponent {
    private readonly usersResource = inject(UsersResource);
    private readonly userId = signal(1);

    // Automatically refetches when userId changes
    readonly user = this.usersResource.getUserById(this.userId);

    updateUser(newId: number) {
        this.userId.set(newId); // Triggers automatic refetch
    }
}

Default Values

Provide fallback values while data is loading:

export class UsersComponent {
    private readonly usersResource = inject(UsersResource);

    readonly users = this.usersResource.getUsers({ defaultValue: [] });
}

Query Parameters

Pass both static and reactive query parameters:

export class SearchComponent {
    private readonly usersResource = inject(UsersResource);
    private readonly searchTerm = signal("");
    private readonly pageSize = signal(10);

    readonly searchResults = this.usersResource.searchUsers(
        this.searchTerm, // reactive search term
        this.pageSize, // reactive page size
        "active", // static status filter
    );

    updateSearch(term: string) {
        this.searchTerm.set(term);
    }
}

Resource vs Service Comparison

Feature	HTTP Resource	Traditional Service
Loading State	✅ Built-in isLoading()	❌ Manual state management
Error Handling	✅ Built-in error()	❌ Manual error handling
Reactivity	✅ Signal-based	❌ Observable-based
Parameter Binding	✅ Signal or static	❌ Manual subscription
Request Deduplication	✅ Automatic	❌ Manual implementation
Maturity	✅ Stable	✅ Stable

Limitations

• GET Requests Only: Currently optimized for "GET" requests (see Angular Docs ↗️)

Resources

• Angular httpResource Documentation ↗️
• Angular Signals Guide ↗️
• ng-openapi Configuration