Suponha que eu tenha um componente:

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

Agora, eu gostaria de exibir algum conteúdo padrão se <ng-content>este componente estiver vazio. Existe uma maneira fácil de fazer isso sem acessar o DOM diretamente?

Envolva ng-contentem um elemento HTML como um divpara obter uma referência local a ele e vincule a ngIfexpressão a 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>`

Faltam algumas respostas de @pixelbits. Precisamos verificar não apenas a childrenpropriedade, porque quaisquer quebras de linha ou espaços no modelo pai causarão o childrenelemento com texto em branco \ quebras de linha. Melhor verificar .innerHTMLe .trim()isso.

Exemplo de trabalho:

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

EDITAR 17/03/2020

CSS puro (2 soluções)

Fornece conteúdo padrão se nada for projetado no conteúdo ng.

Seletores possíveis:

1. :only-childseletor. Veja esta postagem aqui:: seletor filho único

   ^{Este requer menos código / marcação. Suporte desde o IE 9: Posso usar: filho único}

2. :emptyseletor. Apenas leia mais.

   ^{Suporte do IE 9 e parcialmente desde 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;
}

Caso não esteja funcionando

Esteja ciente de que ter pelo menos um espaço em branco não é considerado vazio. Angular remove os espaços em branco, mas apenas no caso de não ser:

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

ou

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

Quando você injeta o conteúdo, adicione uma variável de referência:

<div #content>Some Content</div>

e em sua classe de componente obtenha uma referência ao conteúdo injetado com @ContentChild ()

@ContentChild('content') content: ElementRef;

então, em seu modelo de componente, você pode verificar se a variável de conteúdo tem um valor

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

Injete elementRef: ElementRefe verifique se elementRef.nativeElementtem filhos. Isso pode funcionar apenas com encapsulation: ViewEncapsulation.Native.

Enrole a <ng-content>tag e verifique se ela tem filhos. Isso não funciona com encapsulation: ViewEncapsulation.Native.

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

e verifique se tem algum filho

@ViewChild('contentWrapper') contentWrapper;

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

(não testado)

Se você deseja exibir um conteúdo padrão, por que você não usa apenas o seletor 'filho único' do css.

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

por exemplo: HTML

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

css

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

Implementei uma solução usando o decorador @ContentChildren , que é semelhante à resposta de @Lerner .

De acordo com a documentação , este decorador:

Obtenha a QueryList de elementos ou diretivas do conteúdo DOM. Sempre que um elemento filho é adicionado, removido ou movido, a lista de consulta será atualizada e as alterações observáveis ​​na lista de consulta emitirão um novo valor.

Portanto, o código necessário no componente pai será:

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

Na classe do componente:

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

Então, no modelo de componente:

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

Exemplo completo : https://stackblitz.com/edit/angular-jjjdqb

Eu encontrei esta solução implementada em componentes angulares, para matSuffix, no componente de campo de formulário .

Na situação em que o conteúdo do componente é injetado posteriormente, depois que o aplicativo é inicializado, também podemos usar uma implementação reativa, inscrevendo-se no changesevento de 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();
  }

}

Exemplo completo : https://stackblitz.com/edit/angular-essvnq

Com o Angular 10, ele mudou ligeiramente. Você usaria:

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

No meu caso, tenho que ocultar o pai do conteúdo-ng vazio:

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

O css simples funciona:

.wrapper {
  display: inline-block;

  &:empty {
    display: none;
  }
}