Awesome
GUI
JSON powered GUI for configurable panels.
Quick links
Compatibility
Angular | @acrodata/gui | Theming |
---|---|---|
>=18.0.0 | 2.x | M2, M3 |
>=17.0.0 | 1.x | M2 |
>=16.0.0 | 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