An improved content projection experience with fallback content

In Angular 18 you will be able to specify fallback content for ng-content slots. This feature allows you to define default content within ng-content tags, if no content is projected into these slots then the specified default content will be displayed.

In previous versions this was also possible, but included a hacky workaround to make this work. This hack involves using a directive to check if the projected content is empty and then conditionally rendering the default content. This approach is not ideal as it requires additional code that's hard to read and can be error-prone.

 child.component.html content_paste
<ng-content select="[super-header]">
  <h1>Default Header</h1>
</ng-content>
<ng-content>
  <p>Default Content</p>
</ng-content>

 parent.component.html content_paste
<app-child>
  <div>Some content</div>
</app-child>

 rendered.html content_paste
<h1>Default Header</h1>
<div>Some content</div>

Support me

I appreciate it if you would support me if have you enjoyed this post and found it useful, thank you in advance.

Share this bit on