次のようなコンポーネントがあるとします。
@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 に直接アクセスせずにこれを行う簡単な方法はありますか?
ベストアンサー1
ng-content
のような HTML 要素でラップしてdiv
ローカル参照を取得し、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
。