3

Hi I'm trying to split the content of a component in two parts and I can't seems to make it work. I know that I can user ng-content with the attribute select but I don't know if it's possible to select a number of element with it.

I have this code:

<component-x>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</component-x>

Inside my component-x, I want it to be like this:

<div class="x">
  <div class="y">
    <ng-content></ng-content>
  </div>
  <div class="z">
    <ng-content select="{{lastXDivs}}"></ng-content>
  </div>
</div>

Where lastXDivs equals a number of children.

My result would be like this:

<div class="x">
  <div class="y">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <div class="z">
    <div>4</div>
    <div>5</div>
  </div>
</div>

Is there a way to achieve this?

Note that in my case, the content of divs 1 to 5 are dynamic.

Thanks

charles-emile begin lavigne
  • 920
  • 1
  • 11
  • 21
  • This should help https://stackoverflow.com/questions/52638718/angular-6-multiple-ng-content/52645599#52645599 – Amit Chigadani Feb 07 '19 at 16:25
  • I don't have anything on my children that can help me with a selector except the index. So unfortunately, it doesn't help me. – charles-emile begin lavigne Feb 07 '19 at 16:29
  • You wont be able to archive this directly using `ng-content` under this conditions. If you add some attribute to the divs elements that helps to differentiate them, then yes. Otherwise, the next approach would be to apply a structural div on all of them and then render them through `ngTemplateOutlet` in your component. For your use case, the former is the best... – Jota.Toledo Feb 07 '19 at 16:48
  • 3
    this sounds like a feature that should be supported by angular, e.g. select="div:nth-child(3)"? – ABOS Feb 07 '19 at 17:26
  • @ABOS I dont think so – Jota.Toledo Feb 07 '19 at 19:24

0 Answers0