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

ParameterTypeDescription
configRenderConfigConfiguration 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>>;
}
PropertyTypeDescription
registryAngularRegistryDefault component registry for all <render-spec> instances
storeStateStoreDefault state store for all <render-spec> instances
functionsRecord<string, ComputedFunction>Default computed functions for $fn prop expressions
handlersRecord<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:

PrioritySourceDescription
1 (highest)Component input[registry], [store], [functions], [handlers] on <render-spec>
2RENDER_CONFIGGlobal defaults from provideRender()
3 (lowest)Internal fallbackEmpty 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" />