@gyselroth/gr-dynamic

An Angular package that allows to load components into a component at runtime. This is useful for creating pages that are defined by server configuration.

Breaking change with version 2:

Rename all usages of to

Its solved with 2.1.0 because we let solve the issue depending of whether module is defined.

Usage:

Inside your components HTML

<gr-dynamic [dynamicComponent]="anInstanceOfDynamicComponent"></gr-dynamic>

or

<gr-dynamic-component [dynamicComponent]="anInstanceOfDynamicComponent"></gr-dynamic-component>

or

<gr-dynamic-module-component [dynamicComponent]="anInstanceOfDynamicComponent"></gr-dynamic-module-component>

The difference between gr-dynamic-component and gr-dynamic-module-component is that with

gr-dynamic-component you only define a component

while with

gr-dynamic-module-component you can name a module name and a component name.

Whats the Difference?

gr-dynamic-component defines the module the components reside in in the imports of the module the component is dynamically loaded while with gr-dynamic-module-component you name it in the DynamicComponent class. When using gr-dynamic-module-component the Angular Renderer must be active. This adds approximately 500kb additional load to the load time of the angular application. So in the end its a trade-off of what is smaller. Usually I recommend the usage of gr-dynamic-component. Gr-dynamic-module-component might also have to be used if there are several components with the same name.

Inside your components TS file

let anInstanceOfDynamicComponent: DynamicComponent = new DynamicComponent();

// optional- only in use for gr-dynamic-module-component
anInstanceOfDynamicComponent.moduleType: SomeModule;

anInstanceOfDynamicComponent.componentType: SomeComponent;
anInstanceOfDynamicComponent.inputs = {
    varA: 1,
    varB: 'B'
};
anInstanceOfDynamicComponent.outputs: any = {
    'clicked': this.clickedSomeComponent();
};