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:

    
    ...



        

Answer 1

You can use the adjacent sibling selector

router-outlet + project { ... }

https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors

but only if @drewmoore's approach doesn't apply.

Answer 2

<app>
  <div class="your css class">
   <router-outlet></router-outlet>
</div>
</app>

This works for me

Answer 3

since router injects the component after the the router-outler element, if we would like to style all injected component with the same set of rules the folowing rule is can be helpful.

the css "+" operator select the first sibling element of a certain type, while asterisk (*) is used as a wild card to select any 1st sibling of router-outlet

router-outlet + * {
  // your rules
}

Answer 4

The key is /deep/ keyword:

    :host /deep/ router-outlet + project {
        display: block;
        border: 10px solid black;
    }

This works without any extra configurations.

:host /deep/ router-outlet + * for whatever component dynamically created by Angular Router.

Edited 2018/3/5:

Since Angular 4.3.0 made /deep/ deprecated, its suggested alternative is ::ng-deep. And there were a long discussion about this.

Answer 5

If you need to add a class conditionally, you can add it programmatically from the component:

constructor(private renderer: Renderer2, private elemRef: ElementRef) {
  if(someCondition){
    renderer.addClass(elemRef.nativeElement, 'myClass');
  }
}

Answer 6

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

styles.css

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