// 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

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