Ndtyjky

Suppose I have a component:

@Component({

    selector: 'MyContainer',

    template: `

    <div class="container">

        <!-- some html skipped -->

        <ng-content></ng-content>

        <span *ngIf="????">Display this if ng-content is empty!</span>

        <!-- some html skipped -->

    </div>`

})

export class MyContainer {

}

Now, I would like to display some default content if <ng-content> for this component is empty. Is there an easy way to do this without accessing the DOM directly?

Wrap ng-content in an HTML element like a div to get a local reference to it, then bind the ngIf expression to ref.children.length == 0:

template: `<div #ref><ng-content></ng-content></div> 

           <span *ngIf="ref.nativeElement.childNodes.length == 0">

              Display this if ng-content is empty!

           </span>`

There some missing in @pixelbits answer. We need to check not only children property, because any line breaks or spaces in parent template will cause children element with blank textlinebreaks.
Better to check .innerHTML and .trim() it.

Working example:

<span #ref><ng-content></ng-content></span>

<span *ngIf="!ref.innerHTML.trim()">

    Content if empty

</span>

Inject elementRef: ElementRef and check if elementRef.nativeElement has any children. This might only work with encapsulation: ViewEncapsulation.Native.

Wrap the <ng-content> tag and check if it has children. This doesn't work with encapsulation: ViewEncapsulation.Native.

<div #contentWrapper>

  <ng-content></ng-content>

</div>

and check if it has any children

@ViewChild('contentWrapper') contentWrapper;



ngAfterViewInit() {

  contentWrapper.nativeElement.childNodes...

}

(not tested)

Here is a CSS solution.
This could provide a default component if none was set in the ng-content. As they are siblings in my case, one could solve it like this.

^{Which is compatible since IE 9 and partially since IE7/8: https://caniuse.com/#feat=css-sel3}

HTML

<div class="my-custom-component-content-wrapper">

    <ng-content select="my-custom-component"></ng-content>

</div>

<my-custom-component>

    This shows something default.

</my-custom-component>

CSS

.my-custom-component-content-wrapper:not(:empty) + my-custom-component {

    display: none;

}

When you inject the content add a reference variable:

<div #content>Some Content</div>

and in your component class get a reference to the injected content with @ContentChild()

@ContentChild('content') content: ElementRef;

so in your component template you can check if the content variable has a value

<div>

  <ng-content></ng-content>

  <span *ngIf="!content">

    Display this if ng-content is empty!

  </span>    

</div>