Render · Getting Started

Installation

Detailed setup guide for @threadplane/render in your Angular application.

#Requirements

1
Angular 20+

@threadplane/render uses Angular Signals, the input() function, and the NgComponentOutlet directive. Angular 20 or later is required.

2
Node.js 18+

Required for the build toolchain and package installation.

#Install the Package

npm install @threadplane/render @json-render/core

#Peer Dependencies

The library requires the following peer dependencies:

PackageVersion
@angular/core^20.0.0 or ^21.0.0
@angular/common^20.0.0 or ^21.0.0
@json-render/core^0.16.0
Angular packages

@angular/core and @angular/common are already part of any Angular 20+ project. You only need to install @json-render/core yourself if your package manager doesn't install peer dependencies automatically.

#Configure the Provider

Add provideRender() to your application config. This sets global defaults for every <render-spec> instance in your app.

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRender, defineAngularRegistry } from '@threadplane/render';
import { TextComponent } from './components/text.component';
import { CardComponent } from './components/card.component';
 
const registry = defineAngularRegistry({
  Text: TextComponent,
  Card: CardComponent,
});
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideRender({ registry }),
  ],
};
provideRender() is optional

provideRender() is just a convenience for setting global defaults. You can skip it entirely and pass registry, store, functions, and handlers as inputs directly to <render-spec>. Inputs always win over provider config.

#Minimal App Setup

Here's a complete minimal setup:

import { ApplicationConfig } from '@angular/core';
import { provideRender, defineAngularRegistry } from '@threadplane/render';
import { TextComponent } from './text.component';
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideRender({
      registry: defineAngularRegistry({
        Text: TextComponent,
      }),
    }),
  ],
};

#Verify Installation

Once you're set up, run your app and check the rendered output:

ng serve

If you see your component rendered with the expected props, you're done.

#Troubleshooting

Common issues

"NullInjectorError: No provider for InjectionToken RENDER_CONFIG" -- This means you are trying to inject RENDER_CONFIG but did not call provideRender(). Either add provideRender() to your appConfig providers, or pass the registry and store directly as inputs to <render-spec>. The RENDER_CONFIG token is optional -- the component works without it.

Component not rendering -- Verify that the element type in your spec matches a key in your registry. For example, if your spec uses type: 'Text', your registry must have a Text entry. Use registry.names() to check registered component names.

Missing peer dependency -- If you see module resolution errors for @json-render/core, install it explicitly: npm install @json-render/core.

#Next Steps