Angular 18 Content Projection Fallback With Ng-content

Introduction

In this blog post, I want to describe a new Angular 18 feature called content projection fallback in ng-content. When content exists between the ng-content opening and closing tags, it becomes the fallback value. When projection does not occur, the fallback value is displayed.

  
  
  Bootstrap Application


// app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [
    provideExperimentalZonelessChangeDetection()
  ]
};

    
    

    
    





// main.ts
import { appConfig } from './app.config';
bootstrapApplication(App, appConfig);...