Angular already has HttpClient. You're here because you want OpenAPI-generated types and api.op, not because Axios won a framework war. Put the generated client behind an injectable service and keep components boring.

Service with signals

user.service.ts

import { Injectable, signal } from "@angular/core";
import { api } from "./api/api.client";
import type { UserDto } from "./api/_generated/api.contracts";
import type { ApiError } from "./api/api.error";

@Injectable({ providedIn: "root" })
export class UserService {
  readonly users = signal<UserDto[] | null>(null);
  readonly error = signal<ApiError | null>(null);
  readonly loading = signal(false);

  async loadUsers() {
    this.loading.set(true);
    this.error.set(null);
    const { data, error } = await api.op.listUsers();
    this.loading.set(false);
    if (error) {
      this.error.set(error);
      this.users.set(null);
      return;
    }
    this.users.set(data);
  }

  async getUser(id: string) {
    const { data, error } = await api.op.getUser({ id });
    if (error) throw error; // or map to a domain error
    return data;
  }
}

user-list.component.ts

import { Component, OnInit, inject } from "@angular/core";
import { UserService } from "./user.service";

@Component({
  selector: "app-user-list",
  template: `
    @if (users.loading()) {
      <p>Loading…</p>
    } @else if (users.error(); as err) {
      <p role="alert">{{ err.message }}</p>
    } @else {
      <ul>
        @for (user of users.users(); track user.id) {
          <li>{{ user.email }}</li>
        }
      </ul>
    }
  `,
})
export class UserListComponent implements OnInit {
  readonly users = inject(UserService);

  ngOnInit() {
    void this.users.loadUsers();
  }
}

RxJS bridge (if you must)

api.op returns Promises. Wrap when an Observable pipeline is non-negotiable:

import { from, map } from "rxjs";
import { api } from "./api/api.client";

listUsers$() {
  return from(api.op.listUsers()).pipe(
    map(({ data, error }) => {
      if (error) throw error;
      return data;
    }),
  );
}

Don't double-wrap every call "for consistency." Prefer async/await in services unless the rest of the app is Observable-native.

Config tips

Generate with Node (ng apps still run chowbea-axios fetch in npm scripts).
Prefer auth_mode = "custom" and read tokens from your auth service — not localStorage sprinkled in components.
Output folder often looks like src/app/api — set [output].folder accordingly.

{
  "scripts": {
    "api:fetch": "chowbea-axios fetch",
    "api:watch": "chowbea-axios watch",
    "prestart": "chowbea-axios fetch"
  }
}

Angular

Service with signals

RxJS bridge (if you must)

Config tips

Next Steps

Vanilla / Node

Authentication

Framework Examples

On this page