Embed OpenAPI Docs in an Angular App

Same idea as the React and Vue versions of this guide: GetMan is a plain script exposing window.GetMan.launch(), so an Angular wrapper is just a standalone component that loads the script in ngOnInit and calls the returned unmount function in ngOnDestroy.

The component

import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';

declare global {
  interface Window {
    GetMan: { launch: (el: HTMLElement, opts: { url: string }) => () => void };
  }
}

@Component({
  selector: 'app-api-docs',
  standalone: true,
  template: `<div #container style="height: 100vh"></div>`,
})
export class ApiDocsComponent implements OnInit, OnDestroy {
  @Input() specUrl!: string;
  @ViewChild('container', { static: true }) container!: ElementRef<HTMLDivElement>;

  private unmount?: () => void;

  ngOnInit(): void {
    const script = document.createElement('script');
    script.src = 'https://cdn.getman.dev/latest/getman-ui.js';
    script.onload = () => {
      this.unmount = window.GetMan.launch(
        this.container.nativeElement,
        { url: this.specUrl },
      );
    };
    document.head.appendChild(script);
  }

  ngOnDestroy(): void {
    this.unmount?.();
  }
}

Use it like any other standalone component:

<app-api-docs specUrl="https://your-api.com/openapi.json" />

NgModule-based apps

If your app still uses NgModule instead of standalone components, drop standalone: true and the component’s imports array, and declare ApiDocsComponent in the owning module the usual way — the ngOnInit/ngOnDestroy logic doesn’t change either way.

Server-side rendering (Angular Universal)

If the app uses Angular Universal, guard the script-loading logic behind isPlatformBrowser(this.platformId) so it only runs client-side — the same class of fix as avoiding SSR mount errors in Next.js or Nuxt.