CODEWITHSUNDEEP
angularangular6angular-componentsng-content
Lucas Santos
Lucas Santos

Reputation: 3251

Multiple ng-content

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!

Upvotes: 211

Views: 192678

Answers (6)

Domske
Domske

Reputation: 5656

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.

Upvotes: 113

chaimm
chaimm

Reputation: 400

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

Upvotes: 13

Julian Egner
Julian Egner

Reputation: 281

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.

Upvotes: 6

Angelo Radici
Angelo Radici

Reputation: 181

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>

Upvotes: 18

Amit Chigadani
Amit Chigadani

Reputation: 29705

  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

Upvotes: 383

Wesley Gon&#231;alves
Wesley Gon&#231;alves

Reputation: 2305

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.

Upvotes: 14

Related Questions