This document describes the complete public API of form-lens-angular.

Alpha notice: FormLens is currently in alpha. The public API is intentionally small and may change between alpha releases.

Registers all FormLens services and initializers in the Angular DI tree.

Call this once in your app.config.ts providers array.

import { provideFormLens } from 'form-lens-angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideFormLens(),
    // or with config:
    provideFormLens({ overlayInvalidControls: true }),
  ],
};

EnvironmentProviders — pass directly into the providers array.

Configuration object passed to provideFormLens().

interface FormLensConfig {
  overlayInvalidControls?: boolean;
  enabled?: boolean;
  panelPosition?: 'left' | 'right';
  hotkey?: string;
  detailLevel?: 'minimal' | 'detailed';
}

Selector: [formLens]

A structural directive that registers a FormGroup with the FormLens inspector. Must be applied to an element that also has [formGroup].

import { FormLensDirective } from 'form-lens-angular';

@Component({
  imports: [ReactiveFormsModule, FormLensDirective],
})

<form [formGroup]="myForm" formLens formLensName="My Form">
  <!-- controls -->
</form>

• ngOnInit — registers the form in FormLensRegistry and begins live state observation.
• ngOnDestroy — unregisters the form and clears any active highlight.

Controls the visibility of the inspector panel overlay.

import { FormLensOverlayService } from 'form-lens-angular';

@Component({ ... })
export class MyComponent {
  private readonly overlay = inject(FormLensOverlayService);
}

Opens the inspector panel. Has no effect if the panel is already open.

this.overlay.open();

Closes the inspector panel. Has no effect if the panel is already closed.

this.overlay.close();

Toggles the panel between open and closed.

this.overlay.toggle();

Signal<boolean> — reflects the current open/closed state of the panel. Reactive.

const open = this.overlay.isOpen; // Signal<boolean>

The following symbols are exported from form-lens-angular:

// Provider
export { provideFormLens } from './lib/core/formlens.provider';

// Directive
export { FormLensDirective } from './lib/registration/form-lens.directive';

// Overlay service
export { FormLensOverlayService } from './lib/overlay/formlens-overlay.service';

// Config type
export type { FormLensConfig } from './lib/core/formlens.config';

Everything else is internal. Do not rely on internal symbols — they are not part of the public contract and may change without notice.