By Alligator
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>
`
})
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
Alligator.io is a developer-focused resource that offers tutorials and insights on a wide range of modern front-end technologies, including Angular 2+, Vue.js, React, TypeScript, Ionic, and JavaScript.
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!
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
Full documentation for every DigitalOcean product.
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.
New accounts only. By submitting your email you agree to our Privacy Policy
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.