Using Angular 2/4, I have a complex page template.
Suppose I have 3 mutually nested components: page.component, inside that header.component and inside that header.title.component with custom selectors set appropriately.
page.component html template:
<layout-header></layout-header>
...
header.component html template:
<section class="dynamic-content" *ngIf="!collapsed" #dynamicContent>
<layout-header-title></layout-header-title>
...
</section>
header.title.component html template:
<ng-content selector="card-layout-title"></ng-content>
Then, on my actual page template:
<layout-page>
<card-layout-title>Title goes here</card-layout-title>
</layout-page>
The ng-content selector="card-layout-title" only works when the direct parent is the component with the tag inside to select, i.e. from header.title.component I am unable to select 2-levels-up the nested components to find the content to transclude into card-layout-title.
How can I do this (preferably without adding and passing a template ref into each level, as there are 5-10 nested components at each level)?