CODEWITHSUNDEEP
angularbootstrap-4
lGSMl
lGSMl

Reputation: 171

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

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>

Upvotes: 1

Views: 1699

Answers (1)

lGSMl
lGSMl

Reputation: 171

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>

Upvotes: -1

Related Questions