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
– Babar Hussain, Commented Mar 20, 2017 at 20:21
The components are dynamically created and the number of components are driven by the API. — indra257
– indra257, Commented Mar 20, 2017 at 20:34
A wrapper function like shown in stackoverflow.com/questions/36325212/… might help. — Günter Zöchbauer
– Günter Zöchbauer, Commented Mar 20, 2017 at 20:42
No matter how much components api returns divide them by two put them into array with two loops — Babar Hussain
– Babar Hussain, Commented Mar 20, 2017 at 20:58
But I need to bind data to these components. Any sample code is highly appreciated. — indra257
– indra257, Commented Mar 20, 2017 at 21:02

birwin · Accepted Answer · 2017-03-20 20:44:16Z

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, 2017 at 20:44

birwin

2,6943 gold badges25 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

indra257 Over a year ago

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 Over a year ago

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 } ];

birwin Over a year ago

I recommend iterating through those components and placing them in a two-dimensional array and then using the *ngFor to display in the view.

Abhi · Accepted Answer · 2017-06-21 12:17:46Z

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?

Collectives™ on Stack Overflow

Angular2: Dynamically inject component at row/column location

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related