What is Zod Plugin?

tbd.

Installation

npm install @ng-openapi/zod ng-openapi --save-dev

Quick Start

1. Configure Plugin

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

export default {
    input: "./swagger.json",
    output: "./src/api",
    clientName: "NgOpenApi",
    plugins: [HttpResourcePlugin],
} as GeneratorConfig;

2. Generate Resources

ng-openapi -c openapi.config.ts

3. Setup Providers

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

export const appConfig: ApplicationConfig = {
    providers: [
        provideNgOpenApiClient({
            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
• 🚀 Live Examples