Menu
I'm playing around with Angular's (version 7) content projection. As far as I know, it's possible to select by attribute, class, and tag with the select attribute of <ng-content>.
I've also tried to select by id:
<ng-content select="#myID"></ng-content>
From:
<mycomponent>
<div id="myid">
Test
</div>
</mycomponent>
But it doesn't seem to work.
Why does the selection of IDs not work?
225
The ng-content is used when we want to insert the content dynamically inside the component that helps to increase component reusability. Using ng-content we can pass content inside the component selector and when angular parses that content that appears at the place of ng-content.
ng-content is an important concept to create reusable and flexible components. With the help of ng-content content can be projected by a parent component into a predefined slot. In some cases, you want to apply some styles to the projected content.
The <ng-content> element specifies where to project content inside a component template.
I can't give a reason why you can't target an ID using the syntax like #myID, but you are able to target attributes on DOM nodes using a syntax like [attribute=value] (like you are able to in CSS selectors). Using this, you can then target for a specific ID attribute. In your case you would want to use the following:
<ng-content select="[id=myID]"></ng-content>
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
