Default content for ng-content when using ngIf

May 25, 2023

I have this Angular 9 component, named inner:

<div #ref>
    <ng-content select="[content]"></ng-content>
</div>
<ng-container *ngIf="!ref.hasChildNodes()">
    <div>Default value</div>
</ng-container>

It will be displayed "Some content" if I use it in a parent component this way:

<inner><div content>Some content</div><inner>

It will be displayed "Default value" if I use it in a parent component this way:

<inner><inner>

But in this case:

<inner><div content *ngIf="false">Some content</div><inner>

nothing is displayed. "Some content" is not displayed because condition is false, but also "Default value" is not displayed.

How can I show "Default value" in this case?

I could use a class instead of attribute in the select. But I always prefer use classes to be used by CSS, not for this kind of logic.

>Solution :

You can use another prop from HTMLDivElement and get things work, like this:

<div #ref>
    <ng-content select="[content]"></ng-content>
</div>
<ng-container *ngIf="!ref.childElementCount">
    <div>Default value</div>
</ng-container>