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 do this with a HostBinding, which is effectively the same as using the host property that has already been mentioned, although that method throws a TSLint error with default listing rules.

In your component on which you want to apply a class:

import { Component, HostBinding, Host (optional for typing) } from '@angular/core';

@Component({...})
export class GiveMeAClassComponent {
    @HostBinding('class.some-class') someClass: Host = true;
    ...
}

And then in your root styles.scss file, you can add the following:

.some-class {
    // Styles in here will now be applied to your GiveMeAClassComponent at a root level
}