Tutorial

Content Projection in Angular with ng-content

Angular

While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.

AngularJS had transclusion, and Angular gets content projection with the use of <ng-content></ng-content>.

This post covers Angular 2 and up.

Let’s say you have a home component with a decorator that goes a bit like this:

@Component({
  selector: 'home',
  template: `
    <h1>Heroic Title</h1>
    <p>Something good...</p>
  `
})

And let’s say you want to be able to do something like this when including the component:

<home>
  <p>Something else</p>
</home>

Then what you would do is use <ng-content></ng-content> like this in your component template:

@Component({
  selector: 'home',
  template: `
    <h1>Heroic Title</h1>
    <p>Something good...</p>
    <ng-content></ng-content>
  `
})

The result will then be the following:

<h1>Heroic Title</h1>
<p>Something good...</p>
<p>Something else</p>

And with this, you could also place components inside your wrapper component. Here’s how you would, for example, project the myNav component inside the home component:

<home>
  <myNav></myNav>
</home>

You can also use select on ng-content to define what should be included. In this example, only div elements would be included:

@Component({
  selector: 'home',
  template: `
    <h1>Heroic Title</h1>
    <p>Something good...</p>
    <ng-content select="div">
    </ng-content>
  `
})

And you can use the [attr] syntax to select only elements that have a specific attribute. In the following example, only something like <p intro>…</p> would be included:

@Component({
  selector: 'home',
  template: `
    <h1>Heroic Title</h1>
    <p>Something good...</p>
    <ng-content select="[intro]">
    </ng-content>
  `
})
Creative Commons License