<h4>No context</h4>
<ng-container *ngTemplateOutlet="noContext"></ng-container>
<h4>Fixed Context</h4>
<ng-container *ngTemplateOutlet="fixedContext; context:
{
contentType: 'fixed content',
details: 'This context is hard-coded in the ng-container. It is marginally more
useful than no context, but not much'
}">
</ng-container>
<h4>Dynamic context</h4>
<ng-container *ngTemplateOutlet="dynamicContext; context: getTemplateContext()">
</ng-container>
<!-- I like to define templates down at the bottom so they're out of the way -->
<ng-template #noContext>
This is a template displayuing without any context. All we can do is display this content as is
</ng-template>
<ng-template #fixedContext let-contentType="contentType" let-details="details">
This is a template displaying {{contentType}}. {{details}}
</ng-template>
<ng-template #dynamicContext let-contentType let-details="details">
This is a template displaying {{contentType}}. {{details}}
</ng-template>