core/dynamic-component/dynamic-component.component.ts
C8y dynamic component.
register component in HOOK in module:
import { HOOK_COMPONENT } from '@c8y/ngx-components';
@NgModule({
...,
providers: [{
provide: HOOK_COMPONENT,
multi: true,
useValue: [{
id: 'test-component',
label: 'My test component',
description: 'this is test component',
component: TestComponent
}],
...
}]
Showing dynamic component:
<c8y-dynamic-component [componentId]="'test-component'" [config]="config"></c8y-dynamic-component>
selector | c8y-dynamic-component |
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 : any
|
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. |
callLifeCycleHooks |
callLifeCycleHooks()
|
Calls the dynamic component life cycle hook. Currently only supporting onBeforeSave, a hook which is called before a config component is saved.
Returns :
any
|
ngOnDestroy |
ngOnDestroy()
|
Returns :
void
|
componentInstance |
Type : DynamicComponent
|
dismissAlertStrategy |
Default value : DismissAlertStrategy
|
dynamicComponentErrorStrategy |
Default value : DynamicComponentErrorStrategy
|
errorStrategy |
Type : DynamicComponentErrorStrategy
|
<ng-template #host></ng-template>
<div class="alert alert-warning m-8" role="alert" *ngIf="error && notFoundError">
<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>
<span *ngIf="!expandErrorDetails" translate>Show details</span>
<span *ngIf="expandErrorDetails" translate>Hide details</span>
</button>
</p>
<div [collapse]="!expandErrorDetails" [isAnimated]="true">
<pre>
{{ error }}
</pre>
</div>
</div>
<div
class="overlay-center-vertically d-flex d-col a-i-stretch j-c-start p-16 p-r-24 p-l-24"
*ngIf="
errorStrategy === dynamicComponentErrorStrategy.OVERLAY_ERROR &&
componentInstance?.alerts?.anyAlertExists$ | async
"
>
<ng-container *ngFor="let alertGroup of componentInstance?.alerts?.alertGroups">
<div
*ngIf="alertGroup.value.alerts.length"
class="alert"
role="alert"
[ngClass]="'alert-' + alertGroup.type"
>
<button
class="close"
type="button"
*ngIf="
alertGroup.value.alertDismissal.dismissStrategy === dismissAlertStrategy.TEMPORARY ||
alertGroup.value.alertDismissal.dismissStrategy ===
dismissAlertStrategy.TEMPORARY_OR_PERMANENT
"
(click)="
componentInstance.alerts.dismissAlertGroup(alertGroup.type, dismissPermanently.checked)
"
>
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<p *ngFor="let alertItem of alertGroup.value.alerts">
{{ alertItem.text | translate }}
</p>
<label
title="{{ 'Don\'t show again' | translate }}"
class="c8y-checkbox m-t-16"
[class.hidden]="
alertGroup.value.alertDismissal.dismissStrategy !==
dismissAlertStrategy.TEMPORARY_OR_PERMANENT
"
>
<input type="checkbox" #dismissPermanently />
<span></span>
<span>{{ "Don't show again" | translate }}</span>
</label>
</div>
</ng-container>
</div>