Return to Question

How parent component pass HTML to child component in Angular?

Parent component:

Child component.html:

What I am attempting to do is that I need the Child component.html to get the ng-template to be placed inside app-menu like this,

 <app-menu>  <ng-template>Item A</ng-template>   <ng-template>Item B</ng-template>   </app-menu> 

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

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

How can I send multiple ng-templates to child component and allow child component to put those templates inside option-menu like this?

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

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

Example the Parent component contains multiple ng-templates:

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

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

<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 I am attempting to do is that I need the Child component.html to get the ng-template to be placed inside option-menu like this,

but it seems like the ng-content is empty causing option-menu not getting the optionItem to render these items.

How can I send a ng-template to my child component and allow child component to put the template inside option-menu for option-menu component to process?

but it is empty. Because the app-menu needs to have this HTML structure,

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

What I am attempting to do is that I need the Child component.html to get the ng-template to be placed inside app-menu like this,

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

How can I send multiple ng-templates to child component and allow child component to put those templates inside option-menu like this?

<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 is empty.

<app-childcomponent> <ng-template optionItem>Item A</ng-template> <ng-template optionItem>Item B</ng-template> ... </app-childcomponent> 

 <app-menu> <ng-template optionItem>Item A</ng-template> <ng-template optionItem>Item B</ng-template> </app-menu> 

I have tried passing the template via @input with no good results.

<app-childcomponent [myTemplate]="myTemplate"></child-component> <ng-container #myTemplate> <ng-template optionItem>Item A</ng-template> <ng-template optionItem>Item B</ng-template> </ng-container> 

UPDATED:

Also tried template outlet. Child component still unable to getng-templates.

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

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

 <app-menu> <ng-template>Item A</ng-template> <ng-template>Item B</ng-template> </app-menu> 

What have I tried?

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

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

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

Replying to @Ricardo solution

I tried your update. It was empty as well.

Parent:

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

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-childcomponent [contextMenuSubject]="contextmenuSubject"> <ng-template>Print ME!</ng-template> </app-childcomponent> 

Child:

<ng-content></ng-content>