@ng-render/angular-material

Angular Material component catalog for @ng-render/angular — 19 pre-built Material Design components for AI-generated UIs.

Installation

npm install @ng-render/angular-material @ng-render/angular @json-render/core @angular/material @angular/cdk

Requires Angular 21+ and @ng-render/angular ^0.1.0.

Quick Start

import { provideNgRenderMaterial } from '@ng-render/angular-material';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';

export const appConfig = {
  providers: [
    provideNgRenderMaterial(),
    provideAnimationsAsync(),
  ],
};

Components (19)

Base (drop-in replacements for default catalog)

| Component | Description | |-----------|-------------| | Card | Material card with title, subtitle, appearance | | Button | Material button with variant, appearance, icon | | Text | Text with Material typography classes | | Metric | Outlined card for key-value metrics | | Stack | Flex layout container | | Input | Form field with matInput, appearance, hint | | Checkbox | Material checkbox with color | | Badge | Material chip used as colored badge | | Divider | Material divider line |

Extended (Material-specific)

| Component | Description | |-----------|-------------| | Select | Dropdown with options array | | Slider | Numeric range slider | | DatePicker | Date picker with form field | | Tabs | Tab group with child panels | | Toolbar | Toolbar container | | Progress | Progress bar or spinner | | Chip | Chip set with removable items | | Toggle | Slide toggle | | Radio | Radio group with options |

Custom Options

Pass additional options to provideNgRenderMaterial():

provideNgRenderMaterial({
  handlers: { submitForm: async (params) => { /* ... */ } },
  navigate: (path) => router.navigate([path]),
  fallback: MyFallbackComponent,
});

Or use the registry directly:

import { provideNgRender } from '@ng-render/angular';
import { materialRegistry } from '@ng-render/angular-material';

provideNgRender({ registry: materialRegistry });

Credits

Built on @json-render/core by Vercel Labs. Angular implementation by the ng-render community.

License

MIT