@ng-render/angular 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +87 -0
- package/fesm2022/ng-render-angular.mjs +1527 -0
- package/fesm2022/ng-render-angular.mjs.map +1 -0
- package/package.json +43 -0
- package/types/ng-render-angular.d.ts +537 -0
package/README.md
ADDED
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
# @ng-render/angular
|
|
2
|
+
|
|
3
|
+
Angular renderer for [`@json-render/core`](https://json-render.dev) — render AI-generated JSON specs as Angular component trees.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @ng-render/angular @json-render/core
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
Requires Angular 21+.
|
|
12
|
+
|
|
13
|
+
## Quick Start
|
|
14
|
+
|
|
15
|
+
```typescript
|
|
16
|
+
import { defineCatalog } from '@json-render/core';
|
|
17
|
+
import { schema, defineRegistry, provideNgRender } from '@ng-render/angular';
|
|
18
|
+
import { z } from 'zod';
|
|
19
|
+
|
|
20
|
+
// Define your catalog
|
|
21
|
+
const catalog = defineCatalog(schema, {
|
|
22
|
+
components: {
|
|
23
|
+
Card: {
|
|
24
|
+
props: z.object({ title: z.string() }),
|
|
25
|
+
slots: ['default'],
|
|
26
|
+
description: 'A card container',
|
|
27
|
+
},
|
|
28
|
+
},
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
// Register Angular components
|
|
32
|
+
const { registry } = defineRegistry(catalog, {
|
|
33
|
+
components: { Card: CardComponent },
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
// Provide at app level
|
|
37
|
+
export const appConfig = {
|
|
38
|
+
providers: [provideNgRender({ registry })],
|
|
39
|
+
};
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
```html
|
|
43
|
+
<!-- Render a spec -->
|
|
44
|
+
<json-renderer [spec]="spec" [loading]="isStreaming" />
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## API
|
|
48
|
+
|
|
49
|
+
### Provider
|
|
50
|
+
|
|
51
|
+
- `provideNgRender(options)` — Environment-level provider
|
|
52
|
+
- `NG_RENDER_REGISTRY` — Injection token for component registry
|
|
53
|
+
- `NG_RENDER_ACTION_HANDLERS` — Injection token for action handlers
|
|
54
|
+
- `NG_RENDER_NAVIGATE` — Injection token for navigation handler
|
|
55
|
+
- `NG_RENDER_FALLBACK` — Injection token for fallback component
|
|
56
|
+
|
|
57
|
+
### Components
|
|
58
|
+
|
|
59
|
+
- `JsonRendererComponent` — Main `<json-renderer>` component
|
|
60
|
+
- `ElementRendererComponent` — Internal per-element renderer
|
|
61
|
+
- `ChildrenOutletDirective` — Slot directive for child composition
|
|
62
|
+
- `ConfirmDialogComponent` — Action confirmation dialog
|
|
63
|
+
- `FallbackComponent` — Default unknown-type handler
|
|
64
|
+
|
|
65
|
+
### Hooks
|
|
66
|
+
|
|
67
|
+
- `createUIStream()` — Streaming spec generation with signals
|
|
68
|
+
- `createChatUI()` — Chat interface with spec messages
|
|
69
|
+
- `boundProp()` / `injectBoundProp()` — Two-way data binding helpers
|
|
70
|
+
- `applyPatch()` — JSON Patch application for streaming
|
|
71
|
+
- `buildSpecFromParts()` / `flatToTree()` — Spec construction utilities
|
|
72
|
+
|
|
73
|
+
### Services (per `<json-renderer>` instance)
|
|
74
|
+
|
|
75
|
+
- `SpecStateService` — State management
|
|
76
|
+
- `VisibilityService` — Conditional visibility resolution
|
|
77
|
+
- `ActionDispatcherService` — Action execution and confirmation
|
|
78
|
+
- `ValidationService` — Field validation tracking
|
|
79
|
+
|
|
80
|
+
## Credits
|
|
81
|
+
|
|
82
|
+
Built on [`@json-render/core`](https://json-render.dev) by [Vercel Labs](https://vercel.com).
|
|
83
|
+
Angular implementation by the ng-render community.
|
|
84
|
+
|
|
85
|
+
## License
|
|
86
|
+
|
|
87
|
+
[MIT](../../LICENSE)
|