[解決済み] <ng-content>が空かどうかを確認する方法は？(これまでのAngular 2+で)

質問

あるコンポーネントがあるとします。

@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 {
}

では、デフォルトのコンテンツを表示させるために <ng-content> が空の場合、デフォルトのコンテンツを表示したいと思います。DOMに直接アクセスすることなく、これを行う簡単な方法はありますか？

どのように解決するのですか？

ラップ ng-content のような HTML 要素で div のような HTML 要素で、ローカルな参照を取得し、その参照に ngIf の式を ref.children.length == 0 :

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

Angular 12用に更新しました。 古いロジック（" ref.nativeElement.childNodes.length として、エラーが発生します。 nativeElement は undefined になっています。