Припустимо, у мене є компонент:

@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?

Wrap ng-contentв HTML - елемент як у 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елемент із порожнім текстом \ linebreaks. Краще перевірити .innerHTMLі .trim()це.

Робочий приклад:

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

РЕДАКТУВАТИ 17.03.2020

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

Надає вміст за замовчуванням, якщо в ng-вміст нічого не проектується.

Можливі селектори:

1. :only-childселектор. Дивіться цю публікацію тут:: Селектор лише для дітей

   ^{Для цього потрібно менше коду / розмітки. Підтримка з 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...
}

(не перевірено)

Якщо ви хочете відобразити вміст за замовчуванням, чому ви просто не використовуєте селектор "єдиний дочірній" із 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-вмісту:

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

Прості CSS працює:

.wrapper {
  display: inline-block;

  &:empty {
    display: none;
  }
}

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

Згідно з документами , цей декоратор:

Отримайте 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