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 |
Methods |
Inputs |
componentId
|
The ID of the registered component. It needs to be a component that is hooked with the HOOK_COMPONENTS extension hook.
Type : |
config
|
The configuration to pass.
Type : |
mode
|
DynamicComponents can have two modes, an edit (config) and an view (component) mode. By default it is shown in the component mode.
Type :
Default value : |
notFoundError
|
Disable this to hide the error that is shown if the component was not found.
Default value : |
| 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
|
<ng-template #host></ng-template>
<div class="alert alert-warning m-8" role="alert" *ngIf="notFoundError && error">
<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>