How to apply css class to a component element when it's created by router-outlet?

Question

I have DOM that looks something like this:

<app>     <router-outlet></router-outlet>     <project>...</project> </app> 

where project element is inserted by the router.

How do I add a class to this element?

Answer 1

Assuming you always want the class applied to this component, you can use host in your component metadata:

@Component({   selector:'project',   host: {       class:'classYouWantApplied'   } }) 

Resulting in:

<app>     <router-outlet></router-outlet>     <project class="classYouWantApplied">...</project> </app> 

Answer 2

use the adjacent sibling selector and the * wildcard to select the element immediately following the router-outlet

styles.css

router-outlet + * {   /* your css */ }