We have answer of your question!

100% solved queries, no empty question

Question: Content projection / transclusion without using containing elements


0

I'm trying to transclude some content inside a component (<parent>) with multiple <ng-content> slots without using a containing element for the child.

I need to do this because the layout inside the parent uses flexbox, and I specifically want to leverage the power of flexbox for this particular use-case. Unfortunately with flexbox it works on the direct children, so the containing element is causing problems.

Here is my pseudo parent template. It is using Bootstrap 4 with flexbox enabled.

<div class="row">
    <div class="col-xs">
        Heading
        <ng-content select="[anotherSlot]"></ng-content>
    </div>
    <ng-content select="[child]"></ng-content>
</div>

Then is this what I am doing when I use the component. For simplicity's sake I'm not showing the [anotherSlot] in use, but it is a requirement.

I have tried the @Directive approach, using [child]

<parent>
    <div child>
        <div class="col-xs-2">Small section</div>
        <div class="col-xs">This should fill the available space</div>
    </div>
</parent>

But then my transcluded content is wrapped in a <div child>, so that breaks the flexbox layout.

It renders like this:

<div class="row">
    <div class="col-xs">
        Heading
    </div>
    <div> <!-- This div is the problem -->
        <div class="col-xs-2">Small section</div>
        <div class="col-xs">This should fill the available space</div>
    </div>
</div>

I've also tried the @Component approach:

<parent>
    <child>
        <div class="col-xs-2">Small section</div>
        <div class="col-xs">This should fill the available space</div>
    </child>
</parent>

But that results in this:

<div class="row">
    <div class="col-xs">
        Heading
    </div>
    <child> <!-- This is still a problem -->
        <div class="col-xs-2">Small section</div>
        <div class="col-xs">This should fill the available space</div>
    </child>
</div>

How can I achieve this? The first <div> is static, but the others will vary depending on the use.

<div class="row">
    <div class="col-xs">
        Heading
    </div>
    <div class="col-xs-2">
        Small section
    </div>
    <div class="col-xs">
        This should fill the available space
    </div>
</div>

Can I use <template> somehow?

Question author Daniel-crisp | Source

Answer


1


Ok figured it out.

It turns out that <ng-content> can handle multiple items.

So using the @Directive approach I can do this:

<parent>
    <div class="col-xs-2" child>Small section</div>
    <div class="col-xs" child>This should fill the available space</div>
</parent>

And it results in this:

<div class="row">
    <div class="col-xs">
        Heading
    </div>
    <div class="col-xs-2">
        Small section
    </div>
    <div class="col-xs">
        This should fill the available space
    </div>
 </div>

Obvious really!

Answer author Daniel-crisp

Tickanswer.com is providing the only single recommended solution of the question Content projection / transclusion without using containing elements under the categories i.e angular2 , . Our team of experts filter the best solution for you.

Related Search Queries:


You may also add your answer

Thanks for contributing an answer to Tick Answer!