@orchestrator/core
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.5 • Public • Published

    @orchestrator/core

    Core package of Orchestrator library.

    @orchestrator/core

    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' },
      };
    }

    Install

    npm i @orchestrator/core

    DownloadsWeekly Downloads

    3,646

    Version

    2.0.5

    License

    MIT

    Unpacked Size

    484 kB

    Total Files

    101

    Last publish

    Collaborators

    • orchestratora
    • gund
    • ryuugan