Multiple ng-content

Question

I am trying to build a custom component using multiple ng-content in Angular 6, but this is not working and I have no idea why.

This is my component code:

<div class="header-css-class">
<ng-content select="#header"></ng-content>
</div>
 <div class="body-css-class">
<ng-content select="#body"></ng-content>
</div>

I am trying to use this component in another place and render two different HTML code inside body and header select of ng-content, something like this:

<div #header>This should be rendered in header selection of ng-content</div>
<div #body>This should be rendered in body selection of ng-content</div>

But the component is rendering blank.

Do you guys know what I could be doing wrong or what is the best way to render two different sections in same component?

Thanks!

Answer 1

alternatively you can use:

app.comp.html

<app-child>
    <div role="header">This should be rendered in header selection of ng-content</div>
    <div role="body">This should be rendered in body selection of ng-content</div>
</app-child>

child.comp.html

<div class="header-css-class">
    <ng-content select="div[role=header]"></ng-content>
</div>
<div class="body-css-class">
    <ng-content select="div[role=body]"></ng-content>
</div>

Answer 2

To fit the Web Component specs. Even if that's Angular. It's about avoiding attributes for selector like Angular directives or reserved attributes with another use. So, we just use the "slot" attribute. We'll see <ng-content select="[slot=foobar]"> as <slot name="foobar">.

Example:

hello-world.component.html

<ng-content select="[slot=start]"></ng-content>
<span>Hello World</span>
<ng-content select="[slot=end]"></ng-content>

app.component.html

<app-hello-world>
  <span slot="start">This is a </span>
  <span slot="end"> example.</span>
</app-hello-world>

Result

This is a Hello World example.

Stackblitz Example

You can use any name you want like "banana" or "fish". But "start" and "end" are a good convention to place elements before and after.

Answer 3

1. You could add dummy attributes header and body as opposed to template references (#header, #body).
2. And transclude using ng-content with select attribute like select="[header]".

app.comp.html

<app-child>
    <div header >This should be rendered in header selection of ng-content</div>
    <div body >This should be rendered in body selection of ng-content</div>
</app-child>

child.comp.html

<div class="header-css-class">
    <ng-content select="[header]"></ng-content>
</div>
<div class="body-css-class">
    <ng-content select="[body]"></ng-content>
</div>

DEMO