Angular › Content Projection (ng-content)

How would you use multiple ng-content slots to project content into different specific locations within a component?

Intermediate

Answer

You add a select attribute to each ng-content tag, matching a specific CSS selector, letting content marked with a matching attribute or class be projected into that exact slot, rather than everything landing in the same single place.

@Component({
  selector: 'app-layout',
  template: `
    <header><ng-content select="[header]"></ng-content></header>
    <main><ng-content></ng-content></main>
  `
})
export class LayoutComponent {}

// Used as:
// <app-layout>
//   <nav header>Navigation</nav>
//   <p>Main content here</p>
// </app-layout>

Real-world example A shared layout component lets each page supply its own navigation content for the header slot and its own main content for the default slot, keeping the overall page structure consistent while the actual content varies per page.

Common follow-ups: What happens to content that does not match any select attribute on the ng-content tags?;Can you use a component selector, not just an attribute, as the select value?

Components & Templates;Standalone Components