Put multiple components from ViewContainerRef.createComponent() in separate
s (for bootstrap grid)

Question

I want to dynamically append child components to parent component and have that components inside bootstrap grid system.

Following angular docs (https://angular.io/guide/dynamic-component-loader) I have created directive with ViewContainerRef and added element with that directive to parent template, then I added all the component with factory and ViewContainerRef createComponent().

Overall creating components works fine, but createComponent() method of ViewContainerRef does not give me a chance to actually wrap each created component in some angular elements, as it does not repeat the content, but just append the siblings.

What I want:

<div class="row">
    <div class="col">

       <app-mychild></app-mychild>

   </div>
</div>

<div class="row">
    <div class="col">

       <app-mychild></app-mychild>

   </div>
</div>

What I get if container is a child of grid div:

<div class="row">
    <div class="col">

       <app-mychild></app-mychild>
       <app-mychild></app-mychild>
       <app-mychild></app-mychild>

   </div>
</div>

What I get if child template starts with grid div:

<app-mychild>
    <div class="row">
        <div class="col">
        </div>
    </div>
</app-mychild>

<app-mychild>
    <div class="row">
        <div class="col">
        </div>
    </div>
</app-mychild>

UPD 12.04.19: greatly simplified the question

UPD-2 12.04.19: so I still did not find a solution, but made a workaround that more or less covers my needs, but looks kinda ugly - I've added bootstrap grid class right into component host element so it behaves like col/row, and now the result looks like:

<app-mychild class="row">
    <div class="col">
    </div>
</app-mychild>

did you refer this link https://stackoverflow.com/questions/40314136/dynamic-add-component-using-gridstack-and-angular2-jquery-parsehtml-does-not — Hien Nguyen, Apr 11 '19 at 09:53
I have not seen it, but it looks very related. I will take a look and update the thread if it really solves the issue and can be suited to angular 7, thanks for digging that up — lGSMl, Apr 11 '19 at 16:56
so, apparently after closer look most of solutions propose using jquery or direct DOM manipulation, what is discouraged by ng team. I am looking for more direct approach using ViewContainer = ( — lGSMl, Apr 11 '19 at 23:02
narrowed down the question after todays investigation of the issue — lGSMl, Apr 11 '19 at 23:16

score -1 · Accepted Answer · edited Jun 12 '19 at 17:33

looking through this tutorial https://codeburst.io/display-a-table-using-components-with-angular-4-f13f0971666d I have found more elegant solution, that basically exactly what I need to achieve. It goes against https://angular.io/guide/styleguide#components-as-elements style-guide though, but I suppose this is exactly the "special case". Page looks like this implementing the solution:

<row app-mychild="" class="row">
    <div class="col">
    </div>
</row>

Put multiple components from ViewContainerRef.createComponent() in separate s (for bootstrap grid)

1 Answers1

Put multiple components from ViewContainerRef.createComponent() in separate
s (for bootstrap grid)