How to provide a fallback for empty ng-content in Angular?

Question

Say, I have a component that accepts ng-content in its template:

but I would like the component to display some default content as a fallback, in case nothing is provided as ng-content. Is there a *ngIf type of directive that I could apply as a test whether ng-content is not empty?

Answer 1

You can check for projected content yourself and show alternative content when none was found:

@Component({
  template: `
    <div *ngIf="hasContent">alternative content</div>
    <div #wrapper>
      <ng-content></ng-content>
    </div>
  `
})
class MyComponent implements AfterContentInit {
  @ContentChild('wrapper') wrapper:ElementRef;
  hasContent = false;
  ngAfterContentInit() {
    this.hasContent = this.wrapper.childNodes.length > 0;
  }
}