How to determine if a RenderFragement has a content - razor

Question

I've just built a very simple razor component for templating a page header. Now I've noticed that my condition regarding the ChildComponent != null is always true. Is there a way to check if the ChildContent has any real content defined?
In my example the PageTitleSecondaryRow will always be rendered into my page, even if ChildContent is empty (but it is not NULL). Which Options do I have. As a workaround I will now make an custom RenderFragment property which is null by initialization. But I do not think that this is the final solution.
<div class="wrapper border-bottom white-bg page-heading">
<div class="row" id="PageTitlePrimaryRow">
<div id="PageTitleIconColumn">
#(IconMarkup())
</div>
<div id="PageTitleTextColumn">
<h2>
#Title
</h2>
#if (Elements != null && Elements.Count > 0)
{
<TitleBreadcrumbs Elements="#Elements" />
}
</div>
<div id="PageTitlePostColumn">
</div>
</div>
#if (ChildContent != null )
{
<hr />
<div id="PageTitleSecondaryRow">
#ChildContent
</div>
}
</div>

Answer 1

As Peter Morris said, ChildContent is only null is you use the self-closing syntax <MyComponent />. This is because that is the default render fragment any content gets assigned to, even if it's empty content.
It might be advisable to use a different name for your RenderFragment. This way if it is null, you know it has not been explicitly set. An additional benefit is that more accurately conveys what the render fragment is about.
Consider you have the following component MyComponent.razor:
#if (ListItems != null)
{
<ul>
<li> default item </li>
#ListItems
</ul>
}
else
{
<p>alternative content</p>
}
#code {
[Parameter]
public RenderFragment ListItems { get; set; }
}
By having a different name for the RenderFragment, you have to explicity set it when using this component. This catches the unintended cases where ChildContent might result in empty html:
#* displays only the alternative content *#
<MyComponent></MyComponent>
#* displays the ul element *#
<MyComponent>
<ListItems>
<li> other item </li>
</ListItems>
</MyComponent>
It's basically the same, just a different name for the parameter. This prevents Blazor from assuming anything between the opening an closing belongs inside the ChildContent whenever you do not use the self-closing syntax.