HTTP Resource Plugin
π Angular httpResource integration for ng-openapi
β‘Examples
β’
πDocumentation
β’
πIssues
## 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
```bash
npm install @ng-openapi/http-resource ng-openapi --save-dev
```
## Quick Start
### 1. Configure Plugin
```typescript
// 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
```bash
ng-openapi -c openapi.config.ts
```
### 3. Setup Providers
```typescript
// 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
```typescript
import { Component, inject } from "@angular/core";
import { UsersResource } from "./api/resources";
@Component({
selector: "app-users",
template: `
@if (users.isLoading()) {
Loading...
}
@if (users.error()) {
Error: {{ users.error() }}
}
@for (user of users.value(); track user.id) {
{{ user.name }}
}