Menu
<div class="main">
<ng-content select="[body]"></ng-content>
</div>
<div class="main-copy">
<ng-content select="[body]"></ng-content>
</div>
I am trying to copy the same content into main-copy but unfortunately it is not working.
Any suggestion?
895
To add multiple ng-content, we need to add the select attribute as shown below. The select attribute property creates a mapping between the templates where these need to be transcluded.
Known limitations of our implementation are as follows: You cannot data-bind the slot's name attribute. You cannot data-bind the slot attribute. You cannot dynamically generate slot elements inside a component's view.
Content projection is a pattern in which you insert, or project, the content you want to use inside another component. For example, you could have a Card component that accepts content provided by another component.
To sum up, ng-content is used to display children in a template, ng-container is used as a non-rendered container to avoid having to add a span or a div, and ng-template allows you to group some content that is not rendered directly but can be used in other places of your template or you code.
update Angular 5
ngOutletContext was renamed to ngTemplateOutletContext
See also https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29
original
No, that's not supported.
Every element matching the selector will be projected to the first <ng-content>.
Perhaps ngTemplateOutlet or ngForTemplate is what you're looking for.
See also
72
For future references, here is a working example of multiple transclusion which utilizes ngTemplateOutlet.
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
