Apply class to every routed component in Angular

Do you really need to add class or just style all routed components? You can add this to style all routed components:

router-outlet + * {
    //your styles
}

For angular 6+ use:

router-outlet + ::ng-deep * {
    //your styles
}

Explanation:

Angular inserts the components next to <router-outlet> tag, so the rendered html looks like:

<router-outlet></router-outlet>
<some-component></some-component>

router-outlet + * is css selector for any next sibling of <router-outlet>

If you are using <router-outlet>, just a add a div around your outlet and set the class of the div to "my-class".

<div class="my-class">        
    <router-outlet></router-outlet>
</div>

Related