> For the complete documentation index, see [llms.txt](https://cedrus.gitbook.io/project-fusion/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cedrus.gitbook.io/project-fusion/components/basic/dynamic-component-loader.md).

# 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

```javascript
...,
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

```markup
<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

```css
#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.                                                                              |