Angular 2 Cookbook

Projecting nested content using ngContent

Utilizing components as standalone tags that are self-contained and wholly manage their contents is a clean pattern, but you will frequently find that your component tags demand that they enclose content.

Note

The code, links, and a live example of this are available at http://ngcookbook.herokuapp.com/6172/.

Getting ready

Suppose you had the following application:

[app/ad-section.component.ts] import {Component} from '@angular/core'; @Component({ selector: 'ad-section', template: ` <a href="#">{{adText}}</a> ` }) export class AdSectionComponent { adText:string = 'Selfie sticks 40% off!'; } [app/article.component.ts] import {Component} from '@angular/core'; @Component({ selector: 'article', template: ` <h1>{{title}}</h1> ...