How to render ng-template from host element?

Question

How to render only pending?

I build a layout component and I wrap each section with ng-template because I don't want to render the content immediately.

How to only render ng-template#pending?

<search [results]="searchResults$ | async" [pending]="pending$ | async">
  <form filter ...>...</form>
  <ng-template #empty>empty!</ng-template>
  <ng-template #pending>please wait..</ng-template>
  <ng-template let-context>
    <card *ngFor="let result of context.results">...</card>
  </ng-template>
</search>

I use this component like that:

 <ng-content select="[filter]"></ng-content>
 ??? <--- here, what I write here in order to render ng-template of #pending?

Answer 1

We need to use ContentChild decorator to get projected ng-template reference in the search component and then pass template reference variables to it.

search.component.ts

  @ContentChild('pending') pendingTemplateRef:TemplateRef<any>;

Then in html you have to use NgTemplateOutlet directive to render it

search.component.html

<ng-container *ngTemplateOutlet="pendingTemplateRef">
</ng-container>

Working Example