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

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>

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

styles.css

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

enter image description here

Related