Angular Integration

Configure ng-openapi providers and services in your Angular application.

Basic Setup

Configure Providers

import { ApplicationConfig } from "@angular/core";
import { provideHttpClient } from "@angular/common/http";
import { provideDefaultClient } from "./client/providers";

export const appConfig: ApplicationConfig = {
    providers: [
        provideHttpClient(),
        provideDefaultClient({
            basePath: "https://api.example.com",
        }),
    ],
};

Inject Services

import { Component, inject } from "@angular/core";
import { UsersService } from "./client/services";

@Component({
    selector: "app-users",
    template: `<!-- template -->`,
})
export class UsersComponent {
    private readonly usersService = inject(UsersService);
}

Environment Configuration

import { provideDefaultClient } from "./client/providers";
import { environment } from "./environments/environment";

export const appConfig: ApplicationConfig = {
    providers: [
        provideDefaultClient({
            basePath: environment.apiUrl,
        }),
    ],
};

Disable Date Transformation

provideDefaultClient({
    basePath: "https://api.example.com",
    enableDateTransform: false,
});

Manual Configuration

import { BASE_PATH } from "./client/tokens";

export const appConfig: ApplicationConfig = {
    providers: [{ provide: BASE_PATH, useValue: "https://api.example.com" }],
};

Resources

• Angular Dependency Injection ↗️
• Angular Providers ↗️