JSON powered GUI for configurable panels.
| Angular | @acrodata/gui | Theming |
|---|---|---|
| >=18.0.0 | 2.x | M2, M3 |
| >=17.0.0 | 1.x | M2 |
| >=16.0.0 | 0.x | M2 |
npm install @angular/material @ng-matero/extensions @acrodata/gui --saveDefine 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);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({});
}MIT