Допустим, у меня есть компонент:

@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, например a, divчтобы получить на него локальную ссылку, затем привяжите ngIfвыражение к 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>`

В ответе @pixelbits некоторые отсутствуют. Нам нужно проверять не только childrenсвойство, потому что любые разрывы строк или пробелы в родительском шаблоне вызовут childrenэлемент с пустым текстом \ разрывы строк . Лучше проверить .innerHTMLи.trim() это.

Рабочий пример:

<span #ref><ng-content></ng-content></span>
<span *ngIf="!ref.innerHTML.trim()">
    Content if empty
</span>

РЕДАКТИРОВАТЬ 17.03.2020

Чистый CSS (2 решения)

Предоставляет контент по умолчанию, если в ng-content ничего не проецируется.

Возможные селекторы:

1. :only-childселектор. См. Этот пост здесь :: only-child Selector

   ^{Это требует меньше кода / разметки. Поддержка с IE 9: Могу ли я использовать: only-child}

2. :emptyселектор. Просто читайте дальше.

   ^{Поддержка IE 9 и частично с IE 7/8: https://caniuse.com/#feat=css-sel3}

HTML

<div class="wrapper">
    <ng-content select="my-component"></ng-content>
</div>
<div class="default">
    This shows something default.
</div>

CSS

.wrapper:not(:empty) + .default {
    display: none;
}

Если это не работает

Имейте в виду, что наличие хотя бы одного пробела не считается пустым. Angular удаляет пробелы, но на всякий случай, если это не так:

<div class="wrapper"><!--
    --><ng-content select="my-component"></ng-content><!--
--></div>

или

<div class="wrapper"><ng-content select="my-component"></ng-content</div>

Когда вы вводите контент, добавьте ссылочную переменную:

<div #content>Some Content</div>

и в вашем классе компонентов получите ссылку на внедренный контент с помощью @ContentChild ()

@ContentChild('content') content: ElementRef;

поэтому в шаблоне компонента вы можете проверить, имеет ли переменная содержимого значение

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

Сделайте инъекцию elementRef: ElementRefи проверьте, elementRef.nativeElementесть ли дети. Это может работать только с encapsulation: ViewEncapsulation.Native.

Оберните <ng-content>тег и проверьте, есть ли у него дочерние элементы. Это не работает с encapsulation: ViewEncapsulation.Native.

<div #contentWrapper>
  <ng-content></ng-content>
</div>

и проверьте, есть ли у него дети

@ViewChild('contentWrapper') contentWrapper;

ngAfterViewInit() {
  contentWrapper.nativeElement.childNodes...
}

(не испытано)

Если вы хотите отображать контент по умолчанию, почему бы вам просто не использовать селектор 'only-child' из css.

https://www.w3schools.com/cssref/sel_only-child.asp

например: HTML

<div>
  <ng-content></ng-content>
  <div class="default-content">I am deafult</div>
</div>

css

.default-content:not(:only-child) {
   display: none;
}

В Angular 10 он немного изменился. Вы бы использовали:

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

В моем случае мне нужно скрыть родителя пустого ng-content:

<span class="ml-1 wrapper">
  <ng-content>
  </ng-content>
</span>

Простой css работает:

.wrapper {
  display: inline-block;

  &:empty {
    display: none;
  }
}

Я реализовал решение, используя @ContentChildren декоратор , который чем-то похож на ответ .

Согласно документам , этот декоратор:

Получите QueryList элементов или директив из DOM содержимого. Каждый раз, когда дочерний элемент добавляется, удаляется или перемещается, список запросов будет обновляться, и наблюдаемые изменения списка запросов будут выдавать новое значение.

Итак, необходимый код в родительском компоненте будет:

<app-my-component>
  <div #myComponentContent>
    This is my component content
  </div>
</app-my-component>

В классе компонентов:

@ContentChildren('myComponentContent') content: QueryList<ElementRef>;

Затем в шаблоне компонента:

<div class="container">
  <ng-content></ng-content>
  <span *ngIf="*ngIf="!content.length""><em>Display this if ng-content is empty!</em></span>
</div>

Полный пример : https://stackblitz.com/edit/angular-jjjdqb

Я нашел это решение реализованным в угловых компонентах, например matSuffix, в компоненте поля формы .

В ситуации, когда содержимое компонента вводится позже, после инициализации приложения, мы также можем использовать реактивную реализацию, подписавшись на changesсобытие QueryList:

export class MyComponentComponent implements AfterContentInit, OnDestroy {
  private _subscription: Subscription;
  public hasContent: boolean;

  @ContentChildren('myComponentContent') content: QueryList<ElementRef>;

  constructor() {}

  ngAfterContentInit(): void {
    this.hasContent = (this.content.length > 0);
    this._subscription = this.content.changes.subscribe(() => {
      // do something when content updates
      //
      this.hasContent = (this.content.length > 0);
    });
  }

  ngOnDestroy() {
    this._subscription.unsubscribe();
  }

}

Полный пример : https://stackblitz.com/edit/angular-essvnq