@gyselroth/gr-dynamic
TypeScript icon, indicating that this package has built-in type declarations

3.0.1 • Public • Published

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();
};

Readme

Keywords

Package Sidebar

Install

npm i @gyselroth/gr-dynamic

Weekly Downloads

2

Version

3.0.1

License

ISC

Unpacked Size

217 kB

Total Files

32

Last publish

Collaborators

  • laura.kohli
  • dragan.jevdjovic
  • dragoljub.popovic
  • ovidio.raimondi
  • ewald.kleefstra
  • mahmoud.sino
  • marius.weber
  • pixtron
  • npm-gyselroth
  • mmhann
  • philippenahlik
  • grfreelancer1
  • grfreelancer2
  • luca.marra
  • s-aebischer