Multiple ng-content

Question

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

Answer 1

1. You could add dummy attributes header and body as opposed to template references (#header, #body).
2. And transclude using ng-content with select attribute like select="[header]".

app.comp.html

    
This should be rendered in header selection of ng-content
    
This should be rendered in body selection of ng-content

child.comp.html

DEMO