How to check if ng-content projection slot is being used?

Suppose I have the following HTML structure and I cannot change this:

<ul>
<li><ng-content select="[prefix]"></ng-content></li>
@for (item of items) { <li>{{item}}</li> }
<li><ng-content select="[suffix]"></ng-content></li>
</ul>


How do I check and make the condition to only render the li elements that wrap the prefix and suffix content if the slot is being used? Rather than always rendering the li elements which will be empty if the slot is unused. In other words, how can I essentially implement something like:

<ul>
@if (ngContentPrefix) { <li><ng-content select="[prefix]"></ng-content></li> }
...

Continue reading...