Is deep ng-content select possible at all?

Question

Suppose I want to transclude such a markup into ng-content:

<div aaa>
  AAA
</div>
<div aaa bbb>
  BBB
</div>

For this I can use selectors (which look like regular CSS ones):

<ng-content select="div[aaa]"></ng-content>
----- some other content here -----
<ng-content select="div[aaa][bbb]"></ng-content>

But what if I have this content (I can't get rid of 'section' tag):

<section>
  <div aaa>
    AAA
  </div>
  <div aaa bbb>
    BBB
  </div>
</section>

What selectors can I use to get the same result? This doesn't work for me:

<ng-content select="section div[aaa]"></ng-content>
----- some other content here -----
<ng-content select="section div[aaa][bbb]"></ng-content>

Neither this:

<ng-content select="section>div[aaa]"></ng-content>
----- some other content here -----
<ng-content select="section>div[aaa][bbb]"></ng-content>

Is there any workaround for this? Why the selector doesn't work as CSS one? Is this by design? I can't find the reason on docs...

Will it help if 'section' tag is replaced with 'ng-template' or 'ng-container'?

just a quick question i have is why would you use two ng-content if you are displaying something under section for example why don't you do and then pass both the divs — Gurvinder Guraya, Jun 26 '18 at 03:36
Because both ng-content are in different places on the page, separated from each other with some other content. — Vadim Panov, Jun 26 '18 at 04:06
You cannot use ::ng-deep in an ng-content select string either. — rooby, Feb 08 '19 at 02:58

score 0 · Answer 1 · answered Feb 08 '19 at 02:44

I don't believe it is possible with ng-content.

There are alternatives for what you want to do, however they are a bit more complex.

My preferred way to do this is to use Angular CDK portals. For further information see:

1 Answers1