Angular

Installation

npm i @golemui/core @golemui/gui-shared @golemui/angular @golemui/gui-angular --save

Styles

Import the core styles in your styles.scss or angular.json:

@import '@golemui/gui-components/index.css';

Usage

<gui-form> only needs a formDef. The framework’s built-in widget set is loaded automatically, and an empty form renders fine without initial data.

Programmatic

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { gui } from '@golemui/gui-shared';
import { FormComponent } from '@golemui/gui-angular';

@Component({
  imports: [CommonModule, FormComponent],
  selector: 'app-my-form',
  template: `<gui-form [config]="config"></gui-form>`,
})
export class MyFormComponent {
  protected config = {
    formDef: [gui.inputs.textInput('username', { label: 'Username' })],
  };
}

JSON

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormComponent } from '@golemui/gui-angular';
import formDef from './my-form.json';

@Component({
  imports: [CommonModule, FormComponent],
  selector: 'app-my-form',
  template: `<gui-form [config]="config"></gui-form>`,
})
export class MyFormComponent {
  protected config = { formDef };
}

Adding optional config

Reach for these only when you need them. data prefills the form; customWidgetLoaders is for widgets you’ve built yourself (the framework’s built-ins are merged automatically). Every other config property in the table below follows the same rule — opt in as the form grows.

Programmatic

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { gui } from '@golemui/gui-shared';
import { FormComponent } from '@golemui/gui-angular';
import { myCustomWidgets } from './my-custom-widgets';

@Component({
  imports: [CommonModule, FormComponent],
  selector: 'app-my-form',
  template: `<gui-form [config]="config"></gui-form>`,
})
export class MyFormComponent {
  protected config = {
    formDef: [gui.inputs.textInput('username', { label: 'Username' })],
    data: { username: 'octocat' }, // optional — initial form data
    customWidgetLoaders: myCustomWidgets, // optional — only when the form references widgets you've built yourself
  };
}

JSON

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormComponent } from '@golemui/gui-angular';
import { myCustomWidgets } from './my-custom-widgets';
import formDef from './my-form.json';

@Component({
  imports: [CommonModule, FormComponent],
  selector: 'app-my-form',
  template: `<gui-form [config]="config"></gui-form>`,
})
export class MyFormComponent {
  protected config = {
    formDef,
    data: { username: 'octocat' }, // optional — initial form data
    customWidgetLoaders: myCustomWidgets, // optional — only when the form references widgets you've built yourself
  };
}

<gui-form> inputs

All initialization properties are bundled in the required [config] input (GuiFormInitConfig):

config property	Type	Description
formDef (required)	FormInput	Programmatic gui.* array or parsed JSON form definition.
formSelectors	GslSelectorsInput	GSL selector decorators. Programmatic-only.
formConfig	DxFormConfig	DX engine wiring (loaders, item renderers, dependencies, validateOn, …). Programmatic-only.
data	Record<string, any>	Initial form data.
meta	Record<string, any>	Out-of-band metadata you want to thread through events and state.
customWidgetLoaders	WidgetLoaders<Type<WithWidget>>	Custom widget map; merged with the default Angular widget set.
itemRenderers	Record<string, AngularItemRenderer<any>>	Custom item-renderer map (for dropdown, list, etc.).
customValidators	CustomValidatorSchemas	Custom validator schemas referenced by validator: { type: 'custom', ... }.
middlewares	Middleware<State, Action>[]	Store middlewares (logging, persistence, devtools).
validateOn	ValidateOn	When validation runs: 'eager' (default), 'change', 'blur', 'submit', or an array.
dependencies	Dependencies	External helpers (e.g. a markdown parser).
localization	I18nTranslator	Translator implementing the I18nTranslator interface.

Direct inputs (outside config):

Input	Type	Description
autocomplete	string	Sets the underlying <form> element’s autocomplete attribute.

The component also exposes two outputs:

Output	Type	Description
(formEvent)	FormEvent	Emitted when a widget fires a wired event.
(formHealth)	FormHealth	Emitted when the form’s validation status changes.

See Configuration for details on each input, plus the Programmatic-only vs JSON-form notes.

Custom widgets in Angular

Build your own widgets by implementing WithWidget (from @golemui/core) and injecting one of the framework’s *WidgetAdapter services (InputWidgetAdapter, LayoutWidgetAdapter, DisplayWidgetAdapter, ActionWidgetAdapter) in your constructor. The adapter handles init / destroy and exposes a reactive templateData signal. See Extending GolemUI / Widgets for the full walkthrough.