How parent component pass HTML to child component in Angular?

Question

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

Example the Parent component contains multiple ng-templates:

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

Child component 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 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 have I tried?

I have tried passing the template via @input. <app-childcomponent [myTemplate]="myTemplate"></child-component>
Template outlet. Result: Child component unable to getng-templates.

Parent html:

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

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

If you send it as input param, then you should use NgTemplateOutlet to dynamically create component from template. What was your result? — Oleksandr Poshtaruk
– 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
– Zainu, Commented Feb 27, 2018 at 1:39
blog.angular-university.io/… Easy explaination of ng-template and ngTemplateOutlet — Always_a_learner
– Always_a_learner, Commented Jul 22, 2021 at 2:53

Ben Hayward · Accepted Answer · 2018-11-28 14:48:17Z

6

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

<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 component can be used to inject the custom template.

the parent component should look like this

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

Other solution

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

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

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

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

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

edited Nov 28, 2018 at 14:48

Ben Hayward

1913 silver badges16 bronze badges

answered Feb 26, 2018 at 13:47

Ricardo

2,48722 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Zainu Over a year ago

Hi sounds great! Just curious if there any way to put the template inside the child-component tag? <child-component> or any cleaner way to do this?

Ricardo Over a year ago

@Zainu you can use <ng-content > tag to do it , declare this tag with a name and then refer from the parent component this ng-content tag in the html template that you want to put inside

Zainu Over a year ago

hi, I have tried in chilldcomponent <ng-content [ngTemplateOutlet]="customTemplate"></ng-content> and ` @ContentChild(TemplateRef) customTemplate: TemplateRef<any>` . In parentcomponent <child-component> <ng-template>Item 1</ng-template> <ng-template>Item 2</ng-template> </child-component>

Zainu Over a year ago

I have updated with Replying to @Ricardo solution above ^

Collectives™ on Stack Overflow

How parent component pass HTML to child component in Angular?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related