Best way to render multiple dynamic components in a list

user_419425 0
Viewed 52

I want to render components in a list, but I cannot do this statically. Based on user import I can determine which components I have to show. The problem also is that depending on input inside those components the list can change too

Right now I have everything hardcoded in HTML with a lot of *ngIfs. This worked well but as the complexity of my app increased this approach seems to becoming hard to maintain.

Anyway, my solution is to render the components dynamically, so I only need to create a list of components I would like to render.

Here is a nice article which describes how to dynamically add one component. You create a template

<template #alertContainer></template>

to which you add the dynamic component

const factory: ComponentFactory = this.resolver.resolveComponentFactory(AlertComponent);
this.componentRef: ComponentRef = this.container.createComponent(factory);

However, in my case I have a list

<ol>
    <li *ngFor="let component of components">
       <template ........</template>
    </li>
</ol>

So how can I create a list in this case (I also need to bind to @Inputs and @outputs)?

angular
1 Answers

I've been testing what I mentioned in the comments. This solution is probably what you were looking for. Also I've been playing with it and I've implemented a couple things like event emitting between rendered components, input data to the rendered components and more.

Basically you have a module called ComponentLoaderModule that has a component called ComponentLoader. This component is encharged of rendering components and dealing with the events. Then you have a wrapper component called entry-component, where we spawn the ComponentLoader as many times we need.

From app.component we call the entry-component with all the components we want.

Since it is too big to fit in here, I drop this link where you can take a deep look into it: https://stackblitz.com/edit/angular-ivy-cfyaca?file=src/app/entry-component/entry-component.component.ts

EDIT: This is just a 20 min game in stackblitz, its basic and could be potentially upgraded. It is just a showcase or a start point to build on top.

** EDIT 2 ** Therea are some promises in the code. It's better to use always RxJS instead

user_100309610
Related