// Tutorial //

Content Projection in Angular with ng-content

Published on October 1, 2016
Default avatar
By Alligator.io
Developer and author at DigitalOcean.
Content Projection in Angular with ng-content

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking 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>
  `
})

Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!