@ng-render/angular

Angular renderer for @json-render/core — render AI-generated JSON specs as Angular component trees.

Installation

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

Requires Angular 21+.

Quick Start

import { defineCatalog } from '@json-render/core';
import { schema, defineRegistry, provideNgRender } from '@ng-render/angular';
import { z } from 'zod';

// Define your catalog
const catalog = defineCatalog(schema, {
  components: {
    Card: {
      props: z.object({ title: z.string() }),
      slots: ['default'],
      description: 'A card container',
    },
  },
});

// Register Angular components
const { registry } = defineRegistry(catalog, {
  components: { Card: CardComponent },
});

// Provide at app level
export const appConfig = {
  providers: [provideNgRender({ registry })],
};

<!-- Render a spec -->
<json-renderer [spec]="spec" [loading]="isStreaming" />

API

Provider

• provideNgRender(options) — Environment-level provider
• NG_RENDER_REGISTRY — Injection token for component registry
• NG_RENDER_ACTION_HANDLERS — Injection token for action handlers
• NG_RENDER_NAVIGATE — Injection token for navigation handler
• NG_RENDER_FALLBACK — Injection token for fallback component

Components

• JsonRendererComponent — Main <json-renderer> component
• ElementRendererComponent — Internal per-element renderer
• ChildrenOutletDirective — Slot directive for child composition
• ConfirmDialogComponent — Action confirmation dialog
• FallbackComponent — Default unknown-type handler

Hooks

• createUIStream() — Streaming spec generation with signals
• createChatUI() — Chat interface with spec messages
• boundProp() / injectBoundProp() — Two-way data binding helpers
• applyPatch() — JSON Patch application for streaming
• buildSpecFromParts() / flatToTree() — Spec construction utilities

Services (per <json-renderer> instance)

• SpecStateService — State management
• VisibilityService — Conditional visibility resolution
• ActionDispatcherService — Action execution and confirmation
• ValidationService — Field validation tracking

Credits

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

License

MIT