core/dynamic-component/dynamic-component.component.ts
C8y dynamic component.
register component in HOOK in module:
Example : import { hookComponent } from '@c8y/ngx-components';
@NgModule({
...,
providers: [
hookComponent({
id: 'test-component',
label: 'My test component',
description: 'this is test component',
component: TestComponent
})
...
]
Showing dynamic component:
Example :<c8y-dynamic-component [componentId]="'test-component'" [config]="config"></c8y-dynamic-component>
OnDestroy
| selector | c8y-dynamic-component |
| standalone | true |
| imports |
IconDirective
C8yTranslateDirective
CollapseModule
DynamicComponentAlertsComponent
C8yTranslatePipe
AsyncPipe
|
| templateUrl | ./dynamic-component.component.html |
Properties |
Methods |
Inputs |
Outputs |
| componentId |
Type : string
|
|
The ID of the registered component. It needs to be a component that is hooked with the HOOK_COMPONENTS extension hook. |
| config |
Type : unknown
|
|
The configuration to pass. |
| executeResolvers |
Type : boolean
|
Default value : false
|
|
If set to true, it will execute the components resolvers before initializing the component. Defaults to false. |
| mode |
Type : "config" | "component"
|
Default value : 'component'
|
|
DynamicComponents can have two modes, an edit (config) and an view (component) mode. By default it is shown in the component mode. |
| notFoundError |
Type : boolean
|
Default value : true
|
|
Disable this to hide the error that is shown if the component was not found. |
| updateWidgetClasses |
Type : EventEmitter
|
|
Allows to set additional classes for widget styling. |
| emitConfigChange | ||||||||
emitConfigChange(newConfigValues: unknown)
|
||||||||
|
If an outside component changes the configuration, this function triggers ngOnChange on the dynamic component.
Parameters :
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Returns :
void
|
| componentInstance |
Type : DynamicComponent
|
| dynamicComponentErrorStrategy |
Type : unknown
|
Default value : DynamicComponentErrorStrategy
|
| errorStrategy |
Type : DynamicComponentErrorStrategy
|
<ng-template #host></ng-template>
@if (error && notFoundError) {
<div
class="alert alert-warning m-8"
role="alert"
>
<strong class="message">
{{
'This widget cannot be rendered because the current application does not support the following component:'
| translate
}}
{{ componentId }}.
</strong>
<p class="text-muted m-t-8">
<button
class="btn btn-clean"
(click)="expandErrorDetails = !expandErrorDetails"
>
<i c8yIcon="chevron-down"></i>
@if (!expandErrorDetails) {
<span translate>Show details</span>
} @else {
<span translate>Hide details</span>
}
</button>
</p>
<div
[collapse]="!expandErrorDetails"
[isAnimated]="true"
>
<pre>
{{ error }}
</pre
>
</div>
</div>
}
@if (
errorStrategy === dynamicComponentErrorStrategy.OVERLAY_ERROR &&
componentInstance?.alerts?.anyAlertExists$ | async
) {
<div class="overlay-center-vertically d-flex d-col a-i-stretch j-c-start p-16 p-r-24 p-l-24">
<c8y-dynamic-component-alerts
[alerts]="componentInstance.alerts"
></c8y-dynamic-component-alerts>
</div>
}