---
title: "Angular v20 Plugin"
description: "Generate Angular v20 HTTP requests and resources from OpenAPI with the Angular plugin for openapi-ts. Fully compatible with validators, transformers, and all core features."
url: "https://heyapi.dev/docs/openapi/typescript/plugins/angular/v20"
---

Beta [Leave feedback](https://github.com/hey-api/openapi-ts/issues) · [Contribute](https://heyapi.dev/openapi-ts/community/contributing)

### About

[Section titled “About”](#about)

[Angular](https://angular.dev/) is a web framework that empowers developers to build fast, reliable applications.

The Angular plugin for Hey API generates HTTP requests and resources from your OpenAPI spec, fully compatible with validators, transformers, and all core features.

### Collaborators

[Section titled “Collaborators”](#collaborators)

* [![Max Scopp](https://heyapi.dev/_astro/max-scopp_1EnVFq.webp) Max Scopp](https://github.com/max-scopp)

## Features

[Section titled “Features”](#features)

* Angular v20 support
* seamless integration with `@hey-api/openapi-ts` ecosystem
* generate HTTP requests
* generate HTTP resources
* minimal learning curve thanks to extending the underlying technology

## Installation

[Section titled “Installation”](#installation)

In your [configuration](https://heyapi.dev/openapi-ts/get-started), add `@angular/common` to your plugins and you’ll be ready to generate Angular artifacts. 🎉

openapi-ts.config.ts

```js
export default {
  input: 'hey-api/backend', // sign up at app.heyapi.dev
  output: 'src/client',
  plugins: [
    // ...other plugins
    '@angular/common',
  ],
};
```

## Output

[Section titled “Output”](#output)

The Angular plugin will generate the following artifacts, depending on the input specification.

## Requests

[Section titled “Requests”](#requests)

A single function is generated for each endpoint. It returns an [`HttpRequest`](https://angular.dev/api/common/http/HttpRequest) result.

* example

  common.gen.ts

  ```ts
  export const addPetRequest = (options) =>
    client.requestOptions({
      method: 'POST',
      responseStyle: 'data',
      url: '/pet',
      ...options,
    });
  ```

* config

  openapi-ts.config.ts

  ```js
  export default {
    input: 'hey-api/backend', // sign up at app.heyapi.dev
    output: 'src/client',
    plugins: [
      // ...other plugins
      {
        name: '@angular/common',
        httpRequests: true,
      },
    ],
  };
  ```

## Resources

[Section titled “Resources”](#resources)

A single function is generated for each endpoint. It returns a result from [`httpResource`](https://angular.dev/api/common/http/httpResource) call.

* example

  common.gen.ts

  ```ts
  export const addPetResource = (options) => httpResource(() => addPetRequest(options()));
  ```

* config

  openapi-ts.config.ts

  ```js
  export default {
    input: 'hey-api/backend', // sign up at app.heyapi.dev
    output: 'src/client',
    plugins: [
      // ...other plugins
      {
        name: '@angular/common',
        httpResources: true,
      },
    ],
  };
  ```

## API

[Section titled “API”](#api)

You can view the complete list of options in the [UserConfig](https://github.com/hey-api/openapi-ts/blob/main/packages/openapi-ts/src/plugins/@angular/common/types.ts) interface.

## Examples

You can view live examples on [StackBlitz](https://stackblitz.com/orgs/github/hey-api/collections/openapi-ts-examples) or on [GitHub](https://github.com/hey-api/openapi-ts/tree/main/examples).