188

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!

1
  • Sorry, stackoverflow did not save my second code snippet: The code that I am using in component is something like this: <div #header>This is header content</div> <div #body>This is body content</div> Oct 4, 2018 at 3:50

6 Answers 6

352
  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

5
  • 28
    If you don't want to render additional div or any other tag you should use <ng-container>
    – sobczi
    Dec 18, 2019 at 5:25
  • 9
    @AmitChigadani I believe @sobczi meant that you can replace <div header> with <ng-container header>. Apr 26, 2020 at 17:05
  • 9
    I confirm replacing <div header> with <ng-container header> works too.
    – azerafati
    May 26, 2020 at 7:09
  • 1
    For anyone wanting more details, this is called multi-slot content project (as opposed to single-slot). Angular docs have some good examples: angular.io/guide/content-projection
    – Seanimus
    Feb 7, 2022 at 20:47
  • and how can we get the @ContentChild nativeElement ref from header or body? Mar 2, 2022 at 13:58
93

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"> demo.</span>
</app-hello-world>

Result

This is a Hello World demo.

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.

6
  • How can I query those elements ? with name slot.
    – Nexeuz
    Oct 4, 2020 at 17:32
  • It depends on your Angular and component settings and what you exactly want. You can use ViewChild in TS or :host and ::ng-deep in SCSS. But this is just an example. See Stackblitz Maybe ::slotted / ::content will also work. But not sure. The web will offer more about this topic. Generally you should only style the component itself. And avoid styling stuff outside (global). Otherwise you'll have unwanted side effects.
    – Domske
    Oct 5, 2020 at 4:50
  • A good practise is to wrap it. See the updated Stackblitz example in my last comment. See the html and css file of the component. You should prefer this over ng-deep. E.g. <div class="end"><ng-content></ng-content></div> Because this element is accessable in the component. The ng-content is just a pseudo element which is replaced by the docked element outside. So you have to use ng-deep selector.
    – Domske
    Oct 5, 2020 at 5:01
  • @Dominik Let's say I need to know if the "start" slot has content, or has been defined. Is that doable? Mar 25, 2021 at 19:46
  • 1
    @darksoulsong See example. It's a directive to check if element has childs. ... But I would suggest thinking again about whether you really need it or whether there is another solution. :)
    – Domske
    Mar 26, 2021 at 7:42
18

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>
13

Complementing the other answers:

You can also do it with custom tags (like <ion-card>, <ion-card-header>, and <ion-card-content>).

app.comp.html

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

child.comp.html

<div class="header-css-class">
    <ng-content select="app-child-header"></ng-content>
</div>
<div class="content-css-class">
    <ng-content select="app-child-content"></ng-content>
</div>

You'll get a warning message, but it will work. You can suppress the warning messages or use known tags such as header or footer. However, if you don't like any of these methods, you should go with one of the other solutions.

2
  • Do app-child-header and app-child-content have to be defined angular components. Or is it enough to just reference those names in the ng-content select attribute?
    – Ken Hadden
    May 20, 2021 at 16:44
  • 1
    @KenHadden The select attribute will accept any CSS selector of the element that will be projected into the ng-content element. So, you can use it as @Dominik mentioned in this answer, as I mentioned above or with any native HTML elements such as div or spam, for example. You can actually use any CSS selector of the element that will be nested to app-child element as mentioned in the ng-content docs Jun 28, 2021 at 14:49
9

as another option you can pass templates to the child component, and then you would have the benefit of being able to bind values to the content / templates

parent component html

<app-child
    [templateHeader]="header"
    [templateContent]="content">
</app-child>

<ng-template #header
     let-data="data"> < -- how you get dynamic data
     what ever you would like the header to say
     {{data}}
</ng-template>

<ng-template #content>
    what ever you would like the content to say or any other component
</ng-template>

child component ts

export class ChildComponent {
    @Input() templateHeader: TemplateRef<any>;
    @Input() templateContent: TemplateRef<any>;
}

child component html

<div class="header-css-class">
    <ng-container
        *ngTemplateOutlet="
        templateHeader;
        context: {   , < -- if you want to pass data to your template
            data: data
        }">
    </ng-container>
</div>
<div class="content-css-class">
    <ng-container *ngTemplateOutlet="templateContent">
    </ng-container>
</div>

for a more complete explanations of templates see this great article https://indepth.dev/posts/1405/ngtemplateoutlet

1
  • 1
    This is great info, I was looking into how to instantiate multiple times the same <ng-content> and found this answer, so instead I'm making a template and passing it as a TemplateRef. Thanks.
    – Daniel
    Apr 20, 2022 at 21:24
3

if you just want to "accept" more than one component, you can use:

<ng-content select="custom-component,a"></ng-content>

This accepts elements of custom-component as well as anchor (a) elements and does not change the sequence.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.