ANGULAR: КАК ПРОВЕРИТЬ ПЕРЕДАННЫЕ ДАННЫЕ В NG-CONTENT

Иногда возникает задача с проверкой пришли ли данные в ng-content компонента или нет.

Например у нас есть такой шаблон компонента:

<div class="block">
    <div *ngIf="title" class="block__title" innterHtml="title"></div>
    <div class="block__body">
        <ng-content></ng-content>
    </div>
</div>

Проблема в то сто если мы ничего не передали в ng-content то обёртка .block__body все равно отобразится, чего не хотелось бы.

Решение есть. Не очень красивое, но все же...

При вызове компонента оборачиванем данные в ng-template

<ng-template #сontent>
    <p>Body content...</p>
</ng-template>

В компоненте инициализируем переменную:

@ContentChild('content', { static: false }) content: TemplateRef<unknown>;

У после этого в шаблоне уже можем проверить - пришли данные или нет.

<div class="block">
    <div *ngIf="title" class="block__title" innterHtml="title"></div>
    <div *ngIf="content" class="block__body">
        <ng-container *ngTemplateOutlet="mainContent"></ng-container>
    </div>
</div>