@orchestrator/core

@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.

Usage

Create dynamic component

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:

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<YourComponentConfig>
{
  @Input()
  items?: OrchestratorConfigItem<any>[];
  @Input()
  config?: YourComponentConfig;
  @Input()
  context?: any;
}

• config input is a config validated at runtime of your component that is provided via the JSON like config for each component
• context input is any object that is passed down as a context from the top
• items input contains further children of a JSON like subtree that your component may or may not decide to render

Register dynamic component

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:

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 {}

Render dynamic UI

Finally you are ready to render UI dynamically using <orc-orchestrator> component and passing to it JSON like configuration of your UI:

import { Component } from '@angular/core';
import { OrchestratorConfigItem } from '@orchestrator/core';

@Component({
  template: `<orc-orchestrator [config]="config"></orc-orchestrator>`,
})
export class MyComponent {
  config: OrchestratorConfigItem<any> = {
    component: 'your-dynamic-component',
    config: { title: 'Dynamic title' },
  };
}