Content Editor Renderer API

The NgStarter Angular Content Editor Renderer API documents the inputs, provider helpers, renderer definition shape, and dynamic renderer input contract for rendering saved Content Editor JSON blocks as HTML.

Import the renderer and provider helpers from @ngstarter-ui/components/content-editor. Use ngs-content-editor-renderer with blocks produced by ngs-content-editor-builder.

import {
  ContentEditorRenderer,
  provideContentEditorRenderer,
  provideContentEditorRenderers,
  ContentEditorBlockRendererDef,
  ContentEditorBlockRendererInputSignals
} from '@ngstarter-ui/components/content-editor';

Selector

<ngs-content-editor-renderer [content]="blocks"/>

Inputs

Input	Type	Default
`content` Saved content editor blocks to render. Use this for persisted block JSON and preview data.	`ReadonlyArray<ContentEditorBlock>`	`[]`
`blocks` Alternative input for the same block array. When provided, it takes precedence over content.	`ReadonlyArray<ContentEditorBlock> \| null`	`null`

Renderer Providers

API	Type	Notes
`provideContentEditorRenderers(renderers)` Registers multiple custom block renderer definitions through an environment provider.	`EnvironmentProviders`	Adds to default renderers
`provideContentEditorRenderer(renderer)` Registers one custom block renderer definition.	`EnvironmentProviders`	Adds to default renderers
`CONTENT_EDITOR_BLOCK_RENDERERS` Multi provider token used internally by the renderer to collect registered renderer definitions.	`InjectionToken<ReadonlyArray<ReadonlyArray<ContentEditorBlockRendererDef>>>`	[]

Renderer Definition

Property	Type	Required
`type` Block type handled by this renderer, for example paragraph, heading, image, or a custom block type.	`string`	Required
`component` Standalone Angular component used for blocks with the matching type.	`Type<unknown>`	Required

Dynamic Renderer Inputs

Custom renderer components receive these inputs from ngComponentOutletInputs. Use ContentEditorBlockRendererInputSignals when declaring renderer inputs with Angular input().

Input	Type	Default
`block` Original block object passed to the renderer.	`ContentEditorBlock \| null`	`null`
`id` Block id.	`string`	`''`
`type` Block type used to resolve the renderer.	`string`	`''`
`content` Block content payload. The shape depends on the block type.	`TContent`	`undefined`
`props` Inline or block-level properties saved by the editor.	`ContentEditorItemProperty[]`	`[]`
`settings` Block settings payload. The shape depends on the block type.	`TSettings`	`{}`
`index` Zero-based block position in the rendered content array.	`number`	`0`

Using this component in production?

Source code, templates, and commercial support

NgStarter includes source code, admin dashboard templates, and commercial support.

View pricing →Explore admin templates