Check if ng content is empty in Angular

Question

I have a component that has two TemplateRefs

@ViewChild('optionContent') optionContent: TemplateRef<unknown>; @ViewChild('selectContent') selectContent: TemplateRef<unknown>; with template:

<ng-template #optionContent>
      <ng-content select="[option]"></ng-content>
    </ng-template>

    <ng-template #selectContent>
      <ng-content select="[select]"></ng-content>
    </ng-template>

I am passing the above component in its parent and checking if selectcontent exists, it should render the selectcontent else optioncontent but I can not come up with a condition. I am using the following logic in the parent template but it is not working:

<ng-container [ngTemplateOutlet]="state?.selectedItem?.selectContent ?? state?.selectedItem?.optionContent" ></ng-container>

Is there any other way to acheive this?

I tried with the following condition:

<ng-container [ngTemplateOutlet]="state?.selectedItem?.selectContent ?? state?.selectedItem?.optionContent" ></ng-container>

Answer 1

You wanna check if any ng-content is empty, right? Here is a possible solution on Stackoverflow.

template: `<div #ref><ng-content></ng-content></div> 
           <span *ngIf="!ref.children.length">
              Display this if ng-content is empty!
           </span>`

So in short words: You can handle it with css but your solution is absolutely fine.

CSS Example

HTML

<div class="wrapper">
    <ng-content select="my-component"></ng-content>
</div>
<div class="default">
    This shows something default.
</div>

CSS

.wrapper:not(:empty) + .default {
    display: none;
}