Mastering Angular Components

Composition using content projection

Content projection allows you to insert a view portion from a parent component into its child component. This concept is a potent tool when it comes to composition. With so-called content slots, we can mark a position within our child component where we'd like to give our parent components the opportunity to pass in a view portion.

Let's look at a simple content projection example that helps us understand what this is good for:

@Component({ 
  selector: 'mac-reveal-content', 
  template: ` 
    <h2 (click)="showContent = !showContent">{{revealTitle}}</h2>    <div *ngIf="showContent" class="content">      <ng-content></ng-content>    </div>
  ` 
}) 
export class RevealContentComponent {  @Input() title: string; showContent = false; ...