> Core package of Orchestrator library.
npm install @orchestrator/core> Core package of Orchestrator library.
It is providing capabilities to render UIs dynamically from a JSON like configurations
using Angular components that are registered with it.
First you should create some component that you want to be able to render.
To do that - just decorate your component with @DynamicComponent decorator
and pass an object with required class that describes it's configuration
and use interface OrchestratorDynamicComponent that describes inputs:
``ts
import { Component, Input } from '@angular/core';
import {
DynamicComponent,
OrchestratorDynamicComponent,
Option,
} from '@orchestrator/core';
export class YourComponentConfig {
@Option()
title?: string;
}
@Component({
selector: 'your-dynamic-component',
template: Title is {{ config?.title }},`
})
@DynamicComponent({ config: YourComponentConfig })
export class YourDynamicComponent
implements OrchestratorDynamicComponent
{
@Input()
items?: OrchestratorConfigItem
@Input()
config?: YourComponentConfig;
@Input()
context?: any;
}
- config input is a config validated at runtime of your componentcontext
that is provided via the JSON like config for each component
- input is any object that is passed down as a context from the topitems
- input contains further children of a JSON like subtree
that your component may or may not decide to render
Next, you should tell Orchestrator which components are available for render.
To do that - just call OrchestratorCoreModule.withComponents([...])
with your components in your application module:
`ts
import { NgModule } from '@angular/core';
import { OrchestratorCoreModule } from '@orchestrator/core';
import { YourDynamicComponent } from './your-dynamic.component.ts';
@NgModule({
imports: [OrchestratorCoreModule.withComponents([YourDynamicComponent])],
})
export class AppModule {}
`
Finally you are ready to render UI dynamically using component
and passing to it JSON like configuration of your UI:
`ts
import { Component } from '@angular/core';
import { OrchestratorConfigItem } from '@orchestrator/core';
@Component({
template: ,``
})
export class MyComponent {
config: OrchestratorConfigItem
component: 'your-dynamic-component',
config: { title: 'Dynamic title' },
};
}