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