GUI

JSON powered GUI for configurable panels.

Quick links

Documentation | Playground

Compatibility

Angular	@acrodata/gui	Theming
>=20	3.x	M2, M3
>=18 <20	2.x	M2, M3
>=17 <18	1.x, 2.x	M2
>=16 <17	0.x	M2

Installation

npm install @angular/material @ng-matero/extensions @acrodata/gui --save

Setup

Define a theme with Angular Material's theming system. More about theming.

@use '@angular/material' as mat;
@use '@acrodata/gui' as gui;

@include mat.core();

$theme: mat.define-theme(...);

@include gui.all-control-themes($theme);

🚨 If you use the Angular Material as default library and have included all component themes, there's no need to include the GUI themes anymore.

+ @include mat.all-component-themes($theme);
+ @include mtx.all-component-themes($theme);
- @include gui.all-control-themes($theme);

Usage

import { Component } from '@angular/core';
import { GuiFields, GuiForm } from '@acrodata/gui';

@Component({
  selector: 'your-app',
  template: `<gui-form [config]="config" [model]="model" [form]="form" />`,
  standalone: true,
  imports: [GuiForm],
})
export class YourAppComponent {
  config: GuiFields = {
    title: {
      type: 'text',
      name: 'Title',
      default: 'I am title',
    },
  };
  model = {};
  form = new FormGroup({});
}

License

MIT