Understanding Transclusion
Transclusion means the inclusion of the content of one document in another document.
Content Projection in Angular with ng-content
Let’s say you have a home component with a decorator that goes a bit like this:
And let’s say you want to be able to do something like this when including the component:
Then what you would do is use <ng-content></ng-content> like this in your component template:
The result will then be the following:
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:
You can also use select on ng-content to define what should be included. In this example, only div elements would be included:
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:
Reference: https://alligator.io/, https://medium.com/, https://codecraft.tv/
Transclusion means the inclusion of the content of one document in another document.
Content Projection in Angular with ng-content
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>
`
})
Reference: https://alligator.io/, https://medium.com/, https://codecraft.tv/
0 comments:
Post a Comment