# new NgxRenderingEngine()
This class extends the base RenderingEngine to provide Angular-specific rendering capabilities with additional features compared to NgxRenderingEngine. It handles the conversion of field definitions to Angular components, manages component registration, and provides utilities for component creation and input handling. This implementation uses Angular's newer component APIs.
Angular implementation of the RenderingEngine with enhanced features
Example
```typescript
const engine = NgxRenderingEngine.get();
engine.initialize();
const output = engine.render(myModel, {}, viewContainerRef, injector, templateRef);
```Classes
- NgxRenderingEngine
Initializes the rendering engine with the 'angular' engine type. This constructor sets up the base configuration needed for Angular-specific rendering.
- NgxRenderingEngine
Initializes the rendering engine with the 'angular' engine type. This constructor sets up the base configuration needed for Angular-specific rendering.
Members
Array.<AngularDynamicOutput>
# _childs
Stores the outputs of child components during rendering.
Collection of child component outputs
Record.<string, {constructor: Constructor.<unknown>}>
# _components
Static registry that maps component names to their constructors. This allows the engine to look up components by name when rendering.
Registry of registered components
Type.<unknown>
|
undefined
# _instance
Singleton instance reference for the rendering engine.
Static reference to the current instance
Model
# _model
Reference to the model currently being processed by the rendering engine.
Current model being rendered
Methods
# fromFieldDefinition(fieldDef, vcr, injector, tpl, registryFormId) → {AngularDynamicOutput}
This private method takes a field definition and creates the corresponding Angular component. It handles component instantiation, input property mapping, and child component rendering. The method validates input properties against the component's metadata and processes child components recursively.
Converts a field definition to an Angular component output
Parameters:
| Name | Type | Description |
|---|---|---|
fieldDef |
FieldDefinition.<AngularFieldDefinition>
|
The field definition to convert |
vcr |
ViewContainerRef
|
The view container reference for component creation |
injector |
Injector
|
The Angular injector for dependency injection |
tpl |
TemplateRef.<any>
|
The template reference for content projection |
registryFormId |
string
|
Form identifier for the component renderer |
The Angular component output with component reference and inputs
AngularDynamicOutput
# getDecorators(model, globalProps) → {FieldDefinition.<AngularFieldDefinition>}
This method provides access to the field definition generated from a model's decorators. It's a convenience wrapper around the toFieldDefinition method that converts a model to a field definition based on its decorators and the provided global properties.
Extracts decorator metadata from a model
Parameters:
| Name | Type | Description |
|---|---|---|
model |
Model
|
The model to extract decorators from |
globalProps |
Record.<string, unknown>
|
Global properties to include in the field definition |
The field definition generated from the model
FieldDefinition.<AngularFieldDefinition>
# async initialize() → {Promise.<void>}
This method initializes the rendering engine. It checks if the engine is already initialized and sets the initialized flag to true. This method is called before the engine is used to ensure it's properly set up for rendering operations.
Initializes the rendering engine
A promise that resolves when initialization is complete
Promise.<void>
# render(model, globalProps, vcr, injector, tpl) → {AngularDynamicOutput}
This method takes a model and converts it to an Angular component output. It first stores a reference to the model, then converts it to a field definition using the base RenderingEngine's toFieldDefinition method, and finally converts that field definition to an Angular component output using fromFieldDefinition.
Renders a model into an Angular component output
Parameters:
| Name | Type | Description |
|---|---|---|
model |
M
|
The model to render |
globalProps |
Record.<string, unknown>
|
Global properties to pass to the component |
vcr |
ViewContainerRef
|
The view container reference for component creation |
injector |
Injector
|
The Angular injector for dependency injection |
tpl |
TemplateRef.<any>
|
The template reference for content projection |
The Angular component output with component reference and inputs
AngularDynamicOutput
# static components(selectoropt) → {Object|Array}
This static method retrieves either all registered components or a specific component by its selector. When called without a selector, it returns an array of all registered components. When called with a selector, it returns the specific component if found, or throws an error if the component is not registered.
Retrieves registered components from the rendering engine
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
selector |
string
|
<optional> |
Optional selector to retrieve a specific component |
Either a specific component or an array of all components
Object
|
Array
# static createComponent(component, inputsopt, metadata, vcr, injector, templateopt) → {ComponentRef.<unknown>}
This static utility method creates an Angular component instance with the specified inputs and template. It uses Angular's component creation API to instantiate the component and then sets the input properties using the provided metadata.
Creates an Angular component instance
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
component |
Type.<unknown>
|
The component type to create |
||
inputs |
KeyValue
|
<optional> |
{} | The input properties to set on the component |
metadata |
ComponentMirror.<unknown>
|
The component metadata for input validation |
||
vcr |
ViewContainerRef
|
The view container reference for component creation |
||
injector |
Injector
|
The Angular injector for dependency injection |
||
template |
Array.<Node>
|
<optional> |
[] | The template nodes to project into the component |
The created component reference
ComponentRef.<unknown>
# async static destroy() → {Promise.<void>}
This static method clears the current instance reference, effectively destroying the singleton instance of the rendering engine. This can be used to reset the engine state or to prepare for a new instance creation.
Destroys the current engine instance
A promise that resolves when the instance is destroyed
Promise.<void>
# static key(key) → {string}
This static method generates a key for reflection metadata by prefixing the input key with the Angular engine's reflection prefix. This is used for storing and retrieving metadata in a namespaced way to avoid conflicts with other metadata.
Generates a key for reflection metadata
Parameters:
| Name | Type | Description |
|---|---|---|
key |
string
|
The base key to prefix |
The prefixed key for reflection metadata
string
# static registerComponent(name, constructor) → {void}
This static method registers a component constructor with the rendering engine under a specific name. It initializes the components registry if needed and throws an error if a component is already registered under the same name to prevent accidental overrides.
Registers a component with the rendering engine
Parameters:
| Name | Type | Description |
|---|---|---|
name |
string
|
The name to register the component under |
constructor |
Constructor.<unknown>
|
The component constructor |
void
# static setInputs(component, inputs, metadata) → {void}
This static utility method sets input properties on a component instance based on the provided inputs object and component metadata. It handles both simple values and nested objects, recursively processing object properties. The method validates each input against the component's metadata to ensure only valid inputs are set.
Sets input properties on a component instance
Parameters:
| Name | Type | Description |
|---|---|---|
component |
ComponentRef.<unknown>
|
The component reference to set inputs on |
inputs |
KeyValue
|
The input properties to set |
metadata |
ComponentMirror.<unknown>
|
The component metadata for input validation |
void