Angular2 DynamicContentLoader inserting element to top of the target container

Question

All three loadXXX() method seems just put the dynamic component to a target container. If my container already have components inside, how do i put new component to TOP of the existing components? (see example below)

e.g.

<table>
  <tr><td>Existing Row</td></tr>
  <tr><td>Existing Row</td></tr>
</table>

What I want:

<table>
  <tr><td>!!! Insert Here !!!!</td></tr>
  <tr><td>Existing Row</td></tr>
  <tr><td>Existing Row</td></tr>
</table>

row is my component here

I don't fully understand the question. Do you want to insert a `...` row or do you want to insert a component inside the `...`? — Günter Zöchbauer, Apr 24 '16 at 16:58
i want to insert a component. The sample html is just for demonstrating about the position I want to insert to. — Nick, Apr 24 '16 at 17:21

score 1 · Accepted Answer · edited May 23 '17 at 12:25

That's not a straight-forward solution but it might work for you

You can use a wrapper element like explained in Angular 2 dynamic tabs with user-click chosen components and use it like

<table>
  <tr dcl-wrapper *ngFor="let type of types" [type]="type"><td></td></tr>
  <tr><td>Existing Row</td></tr>
  <tr><td>Existing Row</td></tr>
</table>

with a field in the component that holds references to the components you want to insert

class MyComponent {
  types = [MyCmp1, MyCmp2, MyCmp3];
}

this way the order of the components in the types array defines where the components are inserted.

Angular2 DynamicContentLoader inserting element to top of the target container

1 Answers1