Apply class to every routed component in Angular

Question

Is there any way to apply a class to every routed component in Angular. One way is to use host property for each component like

@Component({
    moduleId: module.id,
    selector: 'one',
    host :{class :'my-class'}
    templateUrl: 'one.html',
})

but I don't want to write this for every component.

Answer 1

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>