Issue
I am trying to build a custom component using multiple ng-content
in Angular 6, but this is not working and I have no idea why.
This is my component code:
<div class="header-css-class">
<ng-content select="#header"></ng-content>
</div>
<div class="body-css-class">
<ng-content select="#body"></ng-content>
</div>
I am trying to use this component in another place and render two different HTML code inside body
and header select
of ng-content
, something like this:
<div #header>This should be rendered in header selection of ng-content</div>
<div #body>This should be rendered in body selection of ng-content</div>
But the component is rendering blank.
Do you guys know what I could be doing wrong or what is the best way to render two different sections in same component?
Thanks!
Solution
- You could add dummy attributes
header
andbody
as opposed to template references(#header, #body)
. - And transclude using
ng-content
withselect
attribute likeselect="[header]"
.
app.comp.html
<app-child>
<div header >This should be rendered in header selection of ng-content</div>
<div body >This should be rendered in body selection of ng-content</div>
</app-child>
child.comp.html
<div class="header-css-class">
<ng-content select="[header]"></ng-content>
</div>
<div class="body-css-class">
<ng-content select="[body]"></ng-content>
</div>