provideRender()

Registers global default configuration for @ngaf/render via Angular's dependency injection system.

Import

import { provideRender, RENDER_CONFIG } from '@ngaf/render';

Signature

function provideRender(config: RenderConfig): EnvironmentProviders;

Parameters

Parameter	Type	Description
`config`	`RenderConfig`	Configuration object with default registry, store, functions, and handlers

Returns

EnvironmentProviders -- suitable for use in ApplicationConfig.providers or bootstrapApplication().

RenderConfig

interface RenderConfig {
  registry?: AngularRegistry;
  store?: StateStore;
  functions?: Record<string, ComputedFunction>;
  handlers?: Record<string, (params: Record<string, unknown>) => unknown | Promise<unknown>>;
}

Property	Type	Description
`registry`	`AngularRegistry`	Default component registry for all `<render-spec>` instances
`store`	`StateStore`	Default state store for all `<render-spec>` instances
`functions`	`Record<string, ComputedFunction>`	Default computed functions for `$fn` prop expressions
`handlers`	`Record<string, Handler>`	Default event handlers for action dispatch

All properties are optional. Only provide the defaults you need.

RENDER_CONFIG Token

The configuration is stored in the RENDER_CONFIG injection token:

import { InjectionToken } from '@angular/core';
 
const RENDER_CONFIG = new InjectionToken<RenderConfig>('RENDER_CONFIG');

You can inject it directly if needed:

import { inject } from '@angular/core';
import { RENDER_CONFIG } from '@ngaf/render';
 
const config = inject(RENDER_CONFIG, { optional: true });
// null if provideRender() was not called

Usage

Basic Setup

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

With Store and Handlers

import {
  provideRender,
  defineAngularRegistry,
  signalStateStore,
} from '@ngaf/render';
 
const globalStore = signalStateStore({ theme: 'light' });
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideRender({
      registry: defineAngularRegistry({
        Text: TextComponent,
        Card: CardComponent,
      }),
      store: globalStore,
      functions: {
        uppercase: (args: Record<string, unknown>) =>
          String(args['text']).toUpperCase(),
      },
      handlers: {
        toggleTheme: () => {
          const current = globalStore.get('/theme');
          globalStore.set('/theme', current === 'light' ? 'dark' : 'light');
        },
      },
    }),
  ],
};

Registry Only

If you only need a global registry and want to provide stores per-instance:

provideRender({
  registry: defineAngularRegistry({
    Text: TextComponent,
    Card: CardComponent,
    Button: ButtonComponent,
  }),
})

Resolution Priority

RenderSpecComponent resolves each configuration value using this priority:

Priority	Source	Description
1 (highest)	Component input	`[registry]`, `[store]`, `[functions]`, `[handlers]` on `<render-spec>`
2	`RENDER_CONFIG`	Global defaults from `provideRender()`
3 (lowest)	Internal fallback	Empty registry, internal `signalStateStore()` from `spec.state`

This means inputs always win over global config:

// Global config
provideRender({ registry: registryA, store: storeA });
 
// In template -- registryB overrides registryA, but storeA is still used
<render-spec [spec]="spec" [registry]="registryB" />

Global vs Component-Level Config

Use provideRender() when you want shared defaults across your entire application:

// All <render-spec> instances use this registry by default
provideRender({ registry: myRegistry })

This is ideal when you have a single component library that all specs should use.

Optional Provider

provideRender() is not required. If you skip it, RenderSpecComponent requires you to pass registry and store as inputs (or relies on the internal store fallback).

<!-- Works without provideRender() -- all config via inputs -->
<render-spec [spec]="spec" [registry]="registry" [store]="store" />

RenderSpecComponent API -- how the component uses RENDER_CONFIG
defineAngularRegistry() -- creating registries to pass to config
signalStateStore() -- creating stores to pass to config
Installation -- initial setup with provideRender()