Is it possible to use <ng-content> (and its select option) inside a <ng-template> or does it only works within a component ?
<ng-container *ngTemplateOutlet="tpl"> <span greetings>Hello</span> </ng-container> <ng-template #tpl> <ng-content select="[greetings]"></ng-content> World ! </ng-template> The above code does just render World ! :(
As far as i know it is not possible using ng-content, but you can provide parameters to the template. So it's possible to pass another NgTemplate, which can again be used with an NgTemplateOutlet inside the original template. Here's a working example:
<ng-container *ngTemplateOutlet="tpl, context: {$implicit: paramTemplate}"> </ng-container> <ng-template #paramTemplate> <span>Hello</span> </ng-template> <ng-template #tpl let-param> <ng-container *ngTemplateOutlet="param"></ng-container> World ! </ng-template> Actually it is even possible to pass multiple templates to the original template:
<ng-container *ngTemplateOutlet="tpl, context: {'param1': paramTemplate1, 'param2': paramTemplate2}"> </ng-container> <ng-template #paramTemplate1> <span>Hello</span> </ng-template> <ng-template #paramTemplate2> <span>World</span> </ng-template> <ng-template #tpl let-param1="param1" let-param2="param2"> <ng-container *ngTemplateOutlet="param1"></ng-container> <ng-container *ngTemplateOutlet="param2"></ng-container> </ng-template> 
ngTemplateOutletContext) to the param templates?
<ng-template #tpl letTemplate1="template1" let-templateParam1="templateParam1"> <ng-container *ngTemplateOutlet="template1; context: { param1: templateParam1 }"></ng-container> </ng-template>It is now possible (testing on Angular 17 to use ng-content inside ng-template)
import { Component } from "@angular/core"; import { NgTemplateOutlet } from "@angular/common"; @Component({ selector: "app-sample", standalone: true, imports: [NgTemplateOutlet], template: ` <ng-template #mainContent><ng-content /></ng-template> <ng-container *ngTemplateOutlet="mainContent" /> ` }) export class SampleComponent {} Then in any of the components Html
<app-sample> <p>Some work</p> </app-sample> 
With some trick it's possible to use a kind of ng-content in ng-template:
<h2>ngMacro (component)</h2> <ng-template #tpl21 let-ctx> <div> <ng-macro-content></ng-macro-content> World {{ctx.mark}} </div> </ng-template> <ng-macro [template]="tpl21" [context]="{ mark: '!' }"> Hello </ng-macro> <ng-macro [template]="tpl21" [context]="{ mark: '!!!' }"> Hi </ng-macro> <h2>ngMacro (directive)</h2> <ng-template #tpl22 let-ctx> <div> <span *ngMacroContent></span> World {{ctx.mark}} </div> </ng-template> <ng-container *ngMacro="tpl22; context: { mark: '!' }" > Hello </ng-container> <span *ngMacro="tpl22; context: { mark: '!!!' }" > Hi </span> Exaple on StackBlitz for Angular 14 (can be adapted for earlier versions)
You can use ng-content inside ng-template.
This is something I put together a while back demonstrating putting the ng-content somewhere on dom based on property. look at the html of tabs.component to see this in use.
<tab>my content</tab>) which is rendered into some of its inner template (mobile or desktop)
