open-index/open-npm huggingface dataset:
npm package: @ng-reactive/async-input
Description: Decorator to get observable of Angular component input changes.
Latest version: 0.0.1

# Installation

```
npm install @ng-reactive/async-input --save
```

# Usage

```
import { Component, Input } from '@angular/core';
import { AsyncInput } from '@ng-reactive/async-input';
import { BehaviorSubject } from 'rxjs';

@Component({
  selector: 'app-hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.css']
})
export class HelloComponent {
  @Input() name: string;
  @AsyncInput() name$ = new BehaviorSubject('Default Name');

  constructor() {
    this.name$.subscribe(name => console.log('from async input', name));
  }
}
```
npm package: @ng-render/angular
Description: Angular renderer for @json-render/core — render AI-generated JSON specs as Angular component trees
Latest version: 0.1.0

# @ng-render/angular

Angular renderer for [`@json-render/core`](https://json-render.dev) — render AI-generated JSON specs as Angular component trees.

## Installation

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

Requires Angular 21+.

## Quick Start

```typescript
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 })],
};
```

```html
<!-- 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`](https://json-render.dev) by [Vercel Labs](https://vercel.com).
Angular implementation by the ng-render community.

## License

[MIT](../../LICENSE)
npm package: @ng-render/angular-material
Description: Angular Material component catalog for @ng-render/angular — 19 pre-built Material Design components
Latest version: 0.1.0

# @ng-render/angular-material

Angular Material component catalog for [`@ng-render/angular`](https://github.com/ng-render/ng-render) — 19 pre-built Material Design components for AI-generated UIs.

## Installation

```bash
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

```typescript
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()`:

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

Or use the registry directly:

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

provideNgRender({ registry: materialRegistry });
```

## Credits

Built on [`@json-render/core`](https://json-render.dev) by [Vercel Labs](https://vercel.com).
Angular implementation by the ng-render community.

## License

[MIT](../../LICENSE)
npm package: @ng-rsbuild/plugin-angular
Description: Rsbuild Plugin for building Angular.
Author: Colum Ferry
Latest version: 21.0.4

<div style="text-align: center;">

<div style="background-color: orange; padding: 1rem; border-radius: 0.5rem; font-weight: bold; margin-top: 1rem;">
This package has been moved to @nx/angular-rsbuild.
</div>

<img src="http://github.com/nrwl/angular-rspack/raw/main/rsbuild-plugin-angular.png" alt="Rsbuild Plugin Angular" />

</div>

# @ng-rsbuild/plugin-angular

## Rsbuild Support for Angular

Plugin providing Rsbuild support for Angular applications, both SSR and CSR.

**_Thank you to [Brandon Roberts](https://x.com/brandontroberts) and [Analog](https://analogjs.org/) for their work on building Angular applications with Vite which both inspired this plugin and provided a basis for the compilation implementation._**

### Setup for SSR Application

**Prerequisites**: Angular SSR Application already created with `ng new --ssr`.

1. Install Rsbuild: `npm install --save-dev @rsbuild/core`
2. Install this plugin: `npm install --save-dev @ng-rsbuild/plugin-angular`
3. Create an `rsbuild.config.ts` file at the root of your project with the following:

```ts
import { createConfig } from '@ng-rsbuild/plugin-angular';

export default createConfig({
  browser: './src/main.ts',
  server: './src/main.server.ts',
  ssrEntry: './src/server.ts',
});
```

4. Update your `./src/server.ts` file to use the `createServer` util:

```ts
import { createServer } from '@ng-rsbuild/plugin-angular/ssr';
import bootstrap from './main.server';

const server = createServer(bootstrap);

/** Add your custom server logic here
 *
 * For example, you can add a custom static file server:
 *
 * server.app.use('/static', express.static(staticFolder));
 *
 * Or add additional api routes:
 *
 * server.app.get('/api/hello', (req, res) => {
 *   res.send('Hello World!');
 * });
 *
 * Or add additional middleware:
 *
 * server.app.use((req, res, next) => {
 *   res.send('Hello World!');
 * });
 */

server.listen();
```

5. Run the builds: `npx rsbuild build`
6. Run the server: `node dist/server/server.js`
7. Run the dev server: `npx rsbuild dev`

### Setup for CSR Application

**Prerequisites**: Angular CSR Application already created with `ng new`.

1. Install Rsbuild: `npm install --save-dev @rsbuild/core`
2. Install this plugin: `npm install --save-dev @ng-rsbuild/plugin-angular`
3. Create an `rsbuild.config.ts` file at the root of your project with the following:

```ts
import { createConfig } from '@ng-rsbuild/plugin-angular';

export default createConfig({
  browser: './src/main.ts',
});
```

4. Run the builds: `npx rsbuild build`
5. Run the dev server: `npx rsbuild dev`
npm package: @ng-rsbuild/plugin-nx
Description: Nx Plugin for building Angular applications with Rspack.
Author: Colum Ferry
Latest version: 19.0.0-alpha.29

# @ng-rsbuild/plugin-nx

Plugin for Nx providing generators and executors for building Angular applications with Rsbuild.

## Installation

**Prerequisites**: Existing Nx Workspace

1. Install this plugin `npx nx add @ng-rsbuild/plugin-nx`

## Generate an Angular Application with Rsbuild

1. `npx nx g @ng-rsbuild/plugin-nx:application myapp`

## Build and Serve the Application

1. Build: `npx nx build myapp`
2. Serve: `npx nx dev myapp`
npm package: @ng-rspack/build
Description: Rspack Plugin and Loaders for building Angular.
Author: Colum Ferry
Latest version: 21.0.4

<div style="text-align: center;">

<div style="background-color: orange; padding: 1rem; border-radius: 0.5rem; font-weight: bold; margin-top: 1rem;">
This package has been moved to @nx/angular-rspack.
</div>

# @ng/rspack:build

[![GitHub Actions](https://github.com/nrwl/angular-rspack/actions/workflows/ci.yml/badge.svg)](https://github.com/nrwl/angular-rspack/actions/workflows/ci.yml)
![License](https://img.shields.io/badge/License-MIT-blue)
[![NPM Version](https://img.shields.io/npm/v/%40ng-rspack%2Fbuild?label=%40ng-rspack%2Fbuild)](https://www.npmjs.com/package/@ng-rspack/build)

</div>

<hr>

# Build Angular with Rspack

The goal of `@ng-rspack/build` is to make easy and straightforward to build Angular applications with [rspack](https://rspack.dev).

### Current Status: POC

Currently, this is still being viewed as a proof-of-concept.

There needs to be a lot more comprehensive testing before this is viable for real applications.
npm package: @ng-rspack/compiler
Description: Compilation utilities for Angular with Rspack and Rsbuild.
Author: Colum Ferry
Latest version: 21.0.4

<div style="text-align: center;">

<div style="background-color: orange; padding: 1rem; border-radius: 0.5rem; font-weight: bold; margin-top: 1rem;">
This package has been moved to @nx/angular-rspack-compiler.
</div>

<img src="http://github.com/nrwl/angular-rspack/raw/main/rsbuild-plugin-angular.png" alt="Rsbuild Plugin Angular" />

</div>

# @ng-rspack/compiler

## Compilation Utilities for Angular with Rspack and Rsbuild

This library provides utilities for compiling Angular applications with Rspack and Rsbuild.
npm package: @ng-rspack/nx
Description: Nx Plugin for building Angular applications with Rspack.
Author: Colum Ferry
Latest version: 19.0.0-alpha.29

<div style="text-align: center;">

# @ng/rspack:nx

[![GitHub Actions](https://github.com/Coly010/ng-rspack-build/actions/workflows/ci.yml/badge.svg)](https://github.com/Coly010/ng-rspack-build/actions/workflows/ci.yml)
![License](https://img.shields.io/badge/License-MIT-blue)
[![NPM Version](https://img.shields.io/npm/v/%40ng-rspack%2Fnx?label=%40ng-rspack%2Fnx)](https://www.npmjs.com/package/@ng-rspack/nx)

</div>

<hr>

# Nx Plugin for Building Angular with Rspack

The goal of `@ng-rspack/nx` is to make easy and straightforward to build Angular applications with [rspack](https://rspack.dev).

### Current Status: POC

Currently, this is still being viewed as a proof-of-concept.

There needs to be a lot more comprehensive testing before this is viable for real applications.