@gyselroth/gr-dynamic
v3.0.1
Published
An Angular package that allows to load and change components by configuration at runtime. This is usefull for creating pages that are defined by server configuration.
Downloads
11
Readme
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();
};