ngx-dynamic-grid

Config-driven dynamic reactive-form input grid for Angular. Define form fields as plain objects and let the library render the right Angular Material input for each one.

Status: early development. Milestone 1 ships the core model and the text input. Checkbox, radio, select, currency, percent, and date inputs land in later releases.

Installation

npm install ngx-dynamic-grid

Peer dependencies (install if your app does not already have them):

npm install @angular/material @angular/cdk

Quick start

import { Component } from '@angular/core';
import { ReactiveFormsModule, FormGroup, FormControl } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { DynamicGridInputComponent, TextField } from 'ngx-dynamic-grid';

@Component({
  selector: 'app-demo',
  imports: [ReactiveFormsModule, MatFormFieldModule, DynamicGridInputComponent],
  template: `
    <form [formGroup]="form">
      <mat-form-field>
        <dynamic-grid-input [field]="nameField" formControlName="name" />
      </mat-form-field>
    </form>
  `,
})
export class DemoComponent {
  form = new FormGroup({ name: new FormControl('') });

  nameField = new TextField('Name', 'name').addControlRef(this.form.controls.name);
}

dynamic-grid-input renders the input component that matches the field's type. In milestone 1 only text (and empty) field types are mapped; any other type throws a descriptive error until its input is added in a later release.

License

MIT