Angular2: Dynamically inject component at row/column location

Question

I have my Angular2 application with multiple dynamic components. I am able to create all these dynamic components and load them on to the page using ComponentFactoryResolver. But the problem is I want to dispaly them in row/column fashion. I know the row and column location of the dynamic component that I have created. so I should inject this component at that particular location, which I couldn't able to achieve.

I am creating the dynamic components as below. Here content is the anchor point. I am adding all my dynamic components to this content. So all the dynamically created components are displayed one below the other. But my requirement is to display all these dynamic components in row/column fashion. I know the row/column number of my dynamic component.

const factory = this.componentFactoryResolver.resolveComponentFactory(DonutComponent);
const ref = this.content.createComponent(factory);
 ref.instance.donutchartData = this.donughtChartData;     
ref.changeDetectorRef.detectChanges();

create a two dimensional array put them all inside it in row/column manner and render them ? — Babar Hussain, Mar 20 '17 at 20:21
The components are dynamically created and the number of components are driven by the API. — indra257, Mar 20 '17 at 20:34
A wrapper function like shown in http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 might help. — Günter Zöchbauer, Mar 20 '17 at 20:42
No matter how much components api returns divide them by two put them into array with two loops — Babar Hussain, Mar 20 '17 at 20:58
But I need to bind data to these components. Any sample code is highly appreciated. — indra257, Mar 20 '17 at 21:02

score 0 · Accepted Answer · answered Mar 20 '17 at 20:44

0

You haven't given us a lot of information here. Do you have some code that shows details of what you are trying to accomplish? @BabarBilal suggests placing data in a two-dimensional array and then you could use *ngFor in your view to iterate the rows/cols of the two-dimensional array.

data: string[][];


<tr *ngFor="let row of data">
    <td *ngFor="let col of row">
        {{ col.property }}
    </td>
</tr>

answered Mar 20 '17 at 20:44

birwin

2,524
2
21
41

I have updated the question with information of how I am creating the dynamic component but unable to add to the DOM as per my requirement( row/column fashion) – indra257 Mar 20 '17 at 20:54
I have my components in this fashion with known col and row location. How to display them dynamically in row/column fashion {"componentname": C3, "val": "1", "col":0, "row":0 }, {"componentname": C1, "val":"2", "col":0, "row":1 } ]; – indra257 Mar 21 '17 at 13:52
I recommend iterating through those components and placing them in a two-dimensional array and then using the *ngFor to display in the view. – birwin Mar 21 '17 at 14:14

score 0 · Answer 2 · answered Jun 21 '17 at 12:17

IMO, you can create one component that caters to a block on the a cell. This component then would use the rest of the components that you are trying to inject. All you need to do is set up conditions slightly differently so that Angular takes care of the loading and unloading the component per requirements.

I have achieved something similar on my project where selections and actions on a left side component decides which among a dozen components will be displayed in the 4 sections on the right side. I simply used ngIf to control which component will come up. Hope this helps.

If this is not the answer, then I would like to understand why do you want to create them dynamically, the way you have shown in your code sample?

Angular2: Dynamically inject component at row/column location

2 Answers2