Angular wrapper

@forms-engine/angular wraps the web component in a standalone Angular component with signal-based inputs and outputs. Import it into any standalone component — no NgModule needed.

import { Component } from '@angular/core';
import { FormsEngineComponent } from '@forms-engine/angular';

@Component({
  selector: 'app-questionnaire',
  imports: [FormsEngineComponent],
  template: `
    <forms-engine-embed
      [publicId]="'q_a1b2c3d4e5'"
      [apiBase]="'https://forms.your-domain.com'"
      [externalRef]="userId"
      (completed)="onCompleted($event)"
      (errored)="onError($event)" />
  `,
})
export class QuestionnairePage {
  onCompleted(event: { responseId: string }) { /* … */ }
  onError(event: unknown) { console.error(event); }
}

The selector is forms-engine-embed; it renders the actual <forms-engine> element inside itself.

Inputs

Input	Type	Purpose
publicId	string (required)	→ public-id
apiBase	string (required)	→ api-base
externalRef	string	→ external-ref

Outputs

Output	Source event
loaded	fe-loaded
screenChanged	fe-screen-changed
completed	fe-completed
resumed	fe-resumed
alreadySubmitted	fe-already-submitted
errored	fe-error

(Note the name is errored — error collides with the native DOM event.) Each output emits the event’s detail payload; shapes as documented in Events.

Peer dependency: Angular 22 or newer.

What the wrapper doesn’t expose

As with the React wrapper, persist-session, completion-redirect, and labels have no inputs currently. To use them, mount the web component directly — import @forms-engine/renderer for its side effect, add CUSTOM_ELEMENTS_SCHEMA to your component, and bind attributes on <forms-engine> yourself. Both wrappers are thin by design; the web component is always available underneath.