I have two components, a main component and a subcomponent. The main component wraps the subcomponent to display some content with a title. The subcomponent uses transclusion.
The structure of the main component template is:
<div class="parent">
<subcomponent [title]="componentTitle" class="child">
<p>some content</p>
</subcomponent>
</div>
The structure of the subcomponent template is:
<div class="child">
<h2 class="title">{{title}}</h2>
<ng-content></ng-content>
</div>
Styling the transcluded content in the subcomponent can be done easily like this:
.child p {
background-color: blue;
}
However, I am having trouble styling the title element. This rule doesn't work:
.child h2.title {
background-color: red;
}
Since the main component hosts the subcomponent, using :host does not solve the issue.
Any ideas on how to style the title element?