Supongamos que tengo un 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 {
}

Ahora, me gustaría mostrar contenido predeterminado si <ng-content>este componente está vacío. ¿Existe una manera fácil de hacer esto sin acceder directamente al DOM?

Envuelva ng-contentun elemento HTML como a divpara obtener una referencia local, luego vincule la ngIfexpresión 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>`

Hay algunos que faltan en la respuesta de @pixelbits. Necesitamos verificar no solo la childrenpropiedad, porque cualquier salto de línea o espacio en la plantilla principal provocará un childrenelemento con texto en blanco \ saltos de línea . Mejor comprobar .innerHTMLy.trim() él.

Ejemplo de trabajo:

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

EDITAR 17.03.2020

Pure CSS (2 soluciones)

Proporciona contenido predeterminado si no se proyecta nada en ng-content.

Posibles selectores:

1. :only-childselector. Vea esta publicación aquí: Selector de hijo único

   ^{Este requiere menos código / marcado. Soporte desde IE 9: ¿Puedo usar: hijo único?}

2. :emptyselector. Solo sigue leyendo.

   ^{Soporte de IE 9 y 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;
}

En caso de que no funcione

Tenga en cuenta que tener al menos un espacio en blanco se considera que no está vacío. Angular elimina los espacios en blanco, pero por si acaso no es así:

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

o

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

Cuando inyecte el contenido agregue una variable de referencia:

<div #content>Some Content</div>

y en su clase de componente obtenga una referencia al contenido inyectado con @ContentChild ()

@ContentChild('content') content: ElementRef;

por lo que en su plantilla de componente puede verificar si la variable de contenido tiene un valor

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

Inyecte elementRef: ElementRefy compruebe si elementRef.nativeElementtiene hijos. Es posible que esto solo funcione con encapsulation: ViewEncapsulation.Native.

Envuelva la <ng-content>etiqueta y verifique si tiene hijos. Esto no funciona con encapsulation: ViewEncapsulation.Native.

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

y comprueba si tiene hijos

@ViewChild('contentWrapper') contentWrapper;

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

(no probado)

Si desea mostrar un contenido predeterminado, ¿por qué no usa el selector 'hijo único' de css?

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

por ejemplo: HTML

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

css

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

Con Angular 10, ha cambiado ligeramente. Usarías:

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

En mi caso, tengo que ocultar el padre del contenido ng vacío:

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

CSS simple funciona:

.wrapper {
  display: inline-block;

  &:empty {
    display: none;
  }
}

Implementé una solución usando el decorador @ContentChildren , que de alguna manera es similar a la respuesta de @ Lerner.

Según los documentos , este decorador:

Obtenga la QueryList de elementos o directivas del DOM de contenido. Cada vez que se agrega, elimina o mueve un elemento secundario, la lista de consultas se actualizará y los cambios observables de la lista de consultas emitirán un nuevo valor.

Entonces, el código necesario en el componente principal será:

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

En la clase de componente:

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

Luego, en la plantilla de componentes:

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

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

Encontré esta solución implementada en componentes angulares, para matSuffix, en el componente de campo de formulario .

En la situación en la que el contenido del componente se inyecta más tarde, después de inicializar la aplicación, también podemos usar una implementación reactiva, suscribiéndonos al 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();
  }

}

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