Installation¶

Install¶

npm install ng-form-foundry

Peer dependencies¶

ng-form-foundry renders with Angular Material, so your application must provide these packages:

Package	Version
`@angular/core`, `@angular/common`, `@angular/forms`	`^20.1.0`
`@angular/material`, `@angular/cdk`	`^20.2.0`
`rxjs`	`^7.8.0`

If you don’t already use Angular Material, add it:

ng add @angular/material
# or
npm install @angular/material @angular/cdk

Application setup¶

Two things must be in place for the rendered forms to look correct: a Material theme and the Material Icons font. Animations are optional.

1. Load a Material theme¶

// styles.scss
@use '@angular/material' as mat;

html {
  @include mat.theme((
    color: mat.$violet-palette,
    typography: Roboto,
    density: 0,
  ));
}

2. Load the Material Icons font¶

The add / remove / edit controls use icon buttons. Include the font in your index.html:

<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>

Optional: animations¶

Angular Material components render without animations. If you want animated transitions (expansion panels, tooltips), install @angular/animations and add the provider:

// app.config.ts
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';

export const appConfig: ApplicationConfig = {
  providers: [provideAnimationsAsync() /* ...others */],
};

Verify¶

Import the component and the builder in a standalone component and render a minimal schema — see the Quickstart.