Angular: default content

default-content.ts

@Component({
  selector: 'main-layout',
  template: `
    <ng-content select="header">Hello again</ng-content>
    <ng-content><p>Default content if none is provided.</p></ng-content>
    <ng-content select="footer"></ng-content>
  `
})
export class MainLayoutComponent {}

@Component({
  template: `
    <main-layout>
      <p>Custom main content</p>
      <footer>All rights reserved</footer>
    </main-layout>
  `
})
class AppComponent {}