Angular: custom CSS inside child ngTemplateOutlet

Question

I'm trying to find out how to set custom styles to be applied inside an ngTemplateOutlet in Angular. I have two components, a parent and a child, and I pass a template from the parent to the child, which is then printed using an ngTemplateOutlet. What I'd like to do is to render the templates using both the parent and child's styles, not just one or the other.

Here's what my parent component's HTML looks like:

<child-component [template]="myTemplate">
  <ng-template #myTemplate>
    <p class="paragraph">Hello</p>
  </ng-template>
</child-component>

CSS:

.paragraph { color: red; }

And the child:

<ng-container *ngTemplateOutlet="myTemplate"></ng-container>

CSS:

.paragraph { font-weight: bold; }

What I would want to happen is to see "Hello" with red background and in bold letters, but Angular's shadow DOM encapsulation is forcing the template to ignore the child's styles.

I am aware that I can solve this by removing DOM encapsulation, but that is not an option as I want to avoid adding CSS classes to the global namespace. So I wonder if there's a way to cleanly achieve the desirect effect in Angular.

Answer 1

Try this:

::ng-deep{
 .paragraph { font-weight: bold; }
}