How parent ponent pass multiple ng-templates to child ponent?

Example the Parent ponent contains multiple ng-templates:

<app-childponent>
    <ng-template>Item A</ng-template>
    <ng-template>Item B</ng-template>
    ...
</app-childponent>

Child ponent needs to receive the ng-templates from parent and put inside app-menu:

 <app-menu>
    <ng-content></ng-content>
 </app-menu>

So it will look something like this in the Child ponent:

<app-menu>    
   <ng-template>Item 1</ng-template>     //having trouble sending this to app-menu from parent
   <ng-template>Item 2</ng-template>     //having trouble sending this to app-menu from parent
<app-menu>

but it seems like the ng-content is empty causing app-menu not getting the multiple ng-templates.

 <app-menu>
    //empty
 </app-menu>

What have I tried?

1. I have tried passing the template via @input. <app-childponent [myTemplate]="myTemplate"></child-ponent>

2. Template outlet. Result: Child ponent unable to getng-templates.

Parent html:

<app-childponent>
    <ng-template>Item 1</ng-template>
    <ng-template>Item 2</ng-template>
</app-childponent>

Parent class:

@ContentChild(TemplateRef) templateRef: TemplateRef<any>;

Child html:

<app-menu>
<ng-template [ngTemplateOutlet]="templateRef"></ng-template>
<app-menu>

Expected <ng-template [ngTemplateOutlet]="templateRef"></ng-template> to contain

<ng-template>Item 1</ng-template>
<ng-template>Item 2</ng-template>

but it is empty.

Replying to @Ricardo solution

I tried your update. It was empty as well.

Parent:

<app-childponent top-left-menu>
    <ng-template>Item 1</ng-template>
    <ng-template>Item 2</ng-template>
</app-childponent>

Child:

<ng-content select="[top-left-menu]"></ng-content>

Also I also tried passing ng-template to ng-content but Print ME! did not get rendered. It was empty. It seems like ng-template dont go into ng-content?

Parent:

<app-childponent [contextMenuSubject]="contextmenuSubject">
    <ng-template>Print ME!</ng-template>
</app-childponent>

Child:

<ng-content></ng-content>

How parent ponent pass multiple ng-templates to child ponent?

Example the Parent ponent contains multiple ng-templates:

<app-childponent>
    <ng-template>Item A</ng-template>
    <ng-template>Item B</ng-template>
    ...
</app-childponent>

Child ponent needs to receive the ng-templates from parent and put inside app-menu:

 <app-menu>
    <ng-content></ng-content>
 </app-menu>

So it will look something like this in the Child ponent:

<app-menu>    
   <ng-template>Item 1</ng-template>     //having trouble sending this to app-menu from parent
   <ng-template>Item 2</ng-template>     //having trouble sending this to app-menu from parent
<app-menu>

but it seems like the ng-content is empty causing app-menu not getting the multiple ng-templates.

 <app-menu>
    //empty
 </app-menu>

What have I tried?

1. I have tried passing the template via @input. <app-childponent [myTemplate]="myTemplate"></child-ponent>

2. Template outlet. Result: Child ponent unable to getng-templates.

Parent html:

<app-childponent>
    <ng-template>Item 1</ng-template>
    <ng-template>Item 2</ng-template>
</app-childponent>

Parent class:

@ContentChild(TemplateRef) templateRef: TemplateRef<any>;

Child html:

<app-menu>
<ng-template [ngTemplateOutlet]="templateRef"></ng-template>
<app-menu>

Expected <ng-template [ngTemplateOutlet]="templateRef"></ng-template> to contain

<ng-template>Item 1</ng-template>
<ng-template>Item 2</ng-template>

but it is empty.

Replying to @Ricardo solution

I tried your update. It was empty as well.

Parent:

<app-childponent top-left-menu>
    <ng-template>Item 1</ng-template>
    <ng-template>Item 2</ng-template>
</app-childponent>

Child:

<ng-content select="[top-left-menu]"></ng-content>

Also I also tried passing ng-template to ng-content but Print ME! did not get rendered. It was empty. It seems like ng-template dont go into ng-content?

Parent:

<app-childponent [contextMenuSubject]="contextmenuSubject">
    <ng-template>Print ME!</ng-template>
</app-childponent>

Child:

<ng-content></ng-content>

• javascript
• html
• angular
• typescript

• 1 If you send it as input param, then you should use NgTemplateOutlet to dynamically create ponent from template. What was your result? – Oleksandr Poshtaruk Commented Feb 26, 2018 at 13:40
• I sent it as input param and receive as Input()myTemplate type of ElementRef and attempt to draw it with {{ myTemplate }}. I guess this is wrong X.X – Zainu Commented Feb 27, 2018 at 1:39
• blog.angular-university.io/… Easy explaination of ng-template and ngTemplateOutlet – Always_a_learner Commented Jul 22, 2021 at 2:53

1 Answer 1

You can declare in your child ponent a default template with the property ngTemplateOutlet so you can bind a custom one from the parent ponent

<ng-template [ngTemplateOutlet]="template || defaultTemplate"></ng-template>

<ng-template #defaultTemplate let-item="item">
    {{item}}
</ng-template>

you should expose template like a variable so the parent ponent can be used to inject the custom template.

the parent ponent should look like this

<child-ponent [template]="customTemplate" ></child-ponent>
 <ng-template #customTemplate let-item="item">
      {{item.name}}
 </ng-template>

Other solution

In your child ponent, you can declare the ng-content like this:

 <ng-content select="[top-left-menu]"></ng-content>

then In your parent ponent, you can use his reference in this way:

<custom-super-ponent top-left-menu></custom-super-ponent>

your custom html/ponent will be placed in the position of your ng-content