Dynamic Component Loader

cf-dynamic-component-loader

Loader of existing components.

Using logic

Include in entryComponents array of your app.ts file all components needed to be dynamically loaded. Also add functionality.

app.ts

...,
entryComponents: [
    CfDemoDynamicComponentLoaderExampleOne,
    CfDemoDynamicComponentLoaderExampleTwo,
    CfButtonComponent,
    CfWeatherComponent
]

...

selectedComponent: any;

button = new ButtonModel ({
      label: "My CfButtonComponent",
      color: {
          foreground: "black",
          background: "primary"
      },
      iconProperty: null,
      iconPosition:"right"
  });
weather = new WeatherComponentModel ({
      defaultCity: "Paris"
});  

selectComponent(componentName) {
    switch (componentName) {
      case 1:
        this.selectedComponent = {
          component: CfDemoDynamicComponentLoaderExampleOne,
          inputs: {
            inputText: 'This is example one.'
          }
        };
        break;
      case 2:
        this.selectedComponent = {
          component: CfDemoDynamicComponentLoaderExampleTwo,
          inputs: {
            onClick: () => {
              alert('This is example two.');
            }
          }
        };
        break;
      case 3:
          this.selectedComponent = {
            component: CfButtonComponent,
            inputs: {
              settings: this.button
            }
          };
          break;
      case 4:
          this.selectedComponent = {
            component: CfWeatherComponent,
            inputs: {
              settings: this.weather
            }
          };
          break;
    }
}

app.html

<button md-button="" (click)="selectComponent(1)">Select Component One</button>
<button md-button="" (click)="selectComponent(2)">Select Component Two</button>
<button md-button="" (click)="selectComponent(3)">Select CfButtonComponent</button>
<button md-button="" (click)="selectComponent(4)">Select CfWeatherComponent</button>
<div id="cf-dynamic-component-loader-container">
  <cf-dynamic-component-loader [componentData]="selectedComponent"></cf-dynamic-component-loader>
</div>

app.scss

#cf-dynamic-component-loader-container {
  margin-top: 15px;
}

Component loader componentData properties

Attr	Type	Details
component	string	Component name
inputs	object	Component input parameters
loadedInstance	ElementRef	Reference to ComponentRef of the current component instance. Important: NOT to pass - it's set by dynalic loader after loading component and can be used to destroy component.
id	string	Component ID - to pass if you want it to be set for the specific value, i.e. for ID from storage.