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>   ` })

Leave a Reply

Your email address will not be published. Required fields are marked *