What is HTTP Resource Plugin?

The HTTP Resource plugin generates Angular services using the httpResource API instead of traditional HttpClient. This provides automatic caching, state management, and reactive data loading for your OpenAPI endpoints.

Installation

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

Quick Start

1. Configure Plugin

// 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;

2. Generate Resources

ng-openapi -c openapi.config.ts

3. Setup Providers

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

export const appConfig: ApplicationConfig = {
    providers: [
        // The provider function is named after `clientName` ("MyApi" → provideMyApiClient)
        provideMyApiClient({
            basePath: "https://api.example.com",
        }),
    ],
};

4. Use Generated Resources

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

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

    // Automatic caching and reactive updates
    readonly users = this.usersResource.getUsers();
}

Generated Structure

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

Documentation

• 📖 Full Documentation
• 🎯 Angular httpResource Guide
• 🚀 Live Examples