# new ComponentRendererComponent()
This component provides a flexible way to dynamically render Angular components at runtime based on a tag name. It handles the creation, property binding, and event subscription for dynamically loaded components. This is particularly useful for building configurable UIs where components need to be determined at runtime.
Dynamic component renderer for Decaf Angular applications.
- Implements:
- OnInit
- OnChanges
- OnDestroy
View Source lib/components/component-renderer/component-renderer.component.ts, line 51
Example
<ngx-decaf-component-renderer
[tag]="tag"
[globals]="globals"
(listenEvent)="listenEvent($event)">
</ngx-decaf-component-renderer>Classes
- ComponentRendererComponent
This component provides a flexible way to dynamically render Angular components at runtime based on a tag name. It handles the creation, property binding, and event subscription for dynamically loaded components. This is particularly useful for building configurable UIs where components need to be determined at runtime.
- ComponentRendererComponent
Initializes a new ComponentRendererComponent. This component doesn't require any dependencies to be injected in its constructor as it uses the inject function to obtain the EnvironmentInjector.
Members
ComponentRef.<unknown>
# component
This property holds a reference to the ComponentRef of the dynamically created component. It's used to interact with the component instance, subscribe to its events, and properly destroy it when the renderer is destroyed.
Reference to the dynamically created component.
Record.<string, unknown>
# globals
This input property allows passing a set of properties to the dynamically rendered component. These properties will be mapped to the component's inputs if they match. Properties that don't match any input on the target component will be filtered out with a warning.
Global properties to pass to the rendered component.
- Default Value:
- {}
View Source lib/components/component-renderer/component-renderer.component.ts, line 426
EnvironmentInjector
# injector
This injector is used when creating the dynamic component to provide it with access to the application's dependency injection system. It ensures that the dynamically created component can access the same services and dependencies as statically created components.
Injector used for dependency injection in the dynamic component.
EventEmitter.<RendererCustomEvent>
# listenEvent
This output property emits events that originate from the dynamically rendered component. It allows the parent component to listen for and respond to events from the dynamic component, creating a communication channel between the parent and the dynamically rendered child.
Event emitter for events from the rendered component.
Logger
# logger
This property holds a Logger instance specific to this component. It's used to log information, warnings, and errors related to the component's operations, particularly useful for debugging and monitoring the dynamic component rendering process.
Logger instance for the component.
Model
|
undefined
# model
The data model repository that this component will use for CRUD operations. This provides a connection to the data layer for retrieving and manipulating data.
Repository model for data operations.
Model
|
undefined
# model
The data model repository that this component will use for CRUD operations. This provides a connection to the data layer for retrieving and manipulating data.
Repository model for data operations.
string
# tag
This input property specifies which component should be rendered by providing its registered tag name. The tag must correspond to a component that has been registered with the NgxRenderingEngine. This is a required input as it determines which component to create.
The tag name of the component to be dynamically rendered.
ViewContainerRef
# vcr
This ViewContainerRef provides the container where the dynamically created component will be inserted into the DOM. It's marked as static to ensure it's available during the ngOnInit lifecycle hook when the component is created.
Reference to the container where the dynamic component will be rendered.
ComponentRef.<unknown>
# static component
This property holds a reference to the ComponentRef of the dynamically created component. It's used to interact with the component instance, subscribe to its events, and properly destroy it when the renderer is destroyed.
Reference to the dynamically created component.
Record.<string, unknown>
# static globals
This input property allows passing a set of properties to the dynamically rendered component. These properties will be mapped to the component's inputs if they match. Properties that don't match any input on the target component will be filtered out with a warning.
Global properties to pass to the rendered component.
- Default Value:
- {}
View Source lib/components/component-renderer/component-renderer.component.ts, line 85
EnvironmentInjector
# static injector
This injector is used when creating the dynamic component to provide it with access to the application's dependency injection system. It ensures that the dynamically created component can access the same services and dependencies as statically created components.
Injector used for dependency injection in the dynamic component.
EventEmitter.<RendererCustomEvent>
# static listenEvent
This output property emits events that originate from the dynamically rendered component. It allows the parent component to listen for and respond to events from the dynamic component, creating a communication channel between the parent and the dynamically rendered child.
Event emitter for events from the rendered component.
Logger
# static logger
This property holds a Logger instance specific to this component. It's used to log information, warnings, and errors related to the component's operations, particularly useful for debugging and monitoring the dynamic component rendering process.
Logger instance for the component.
string
# static tag
This input property specifies which component should be rendered by providing its registered tag name. The tag must correspond to a component that has been registered with the NgxRenderingEngine. This is a required input as it determines which component to create.
The tag name of the component to be dynamically rendered.
ViewContainerRef
# static vcr
This ViewContainerRef provides the container where the dynamically created component will be inserted into the DOM. It's marked as static to ensure it's available during the ngOnInit lifecycle hook when the component is created.
Reference to the container where the dynamic component will be rendered.
Methods
# async ngOnDestroy() → {Promise.<void>}
Performs cleanup operations when the component is being destroyed by Angular. This includes unsubscribing from all event emitters of the dynamic component and destroying the rendering engine instance to prevent memory leaks.
Cleans up resources when the component is destroyed.
A promise that resolves when cleanup is complete
Promise.<void>
# ngOnInit() → {void}
Sets up the component by creating the dynamic component specified by the tag input. This method is called once when the component is initialized and triggers the dynamic component creation process with the provided tag name and global properties.
Initializes the component after Angular first displays the data-bound properties.
void