@acrodata/gui NPM

GUI

A lightweight GUI library for Angular.

Installation

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

Setup

import { GuiModule } from '@acrodata/gui';

@NgModule({
  ...
  imports: [GuiModule, ...],
  ...
})
export class YourAppModule {
}

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-light-theme(...);

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

Usage

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

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