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>