Angular 2: Apply CSS Style with component selector

Question

I'm learning Angular 2 and I wonder if it is possible to apply css style by using the component selector like this:

the component

@Component({
    selector: 'app',
    styleUrl: './local.css',
    templateUrl: './app.html',
})
export class AppComponent { }

the style

app {
    width: 10px;
    height: 100px;
    background-color: red;
}

Assume it's possible, is it the best way to do that ?

What do you mean with "best way". Just do it. AFAIK component selector should work (never tried myself though) but `:host` is better practice because it aligns with how webcomponents are styled. — Günter Zöchbauer, Oct 18 '16 at 07:50

score 9 · Accepted Answer · answered Oct 18 '16 at 07:49

9

Use :host instead

:host {
    width: 10px;
    height: 100px;
    background-color: red;
}

Use app when you want to apply styles from outside the component.

answered Oct 18 '16 at 07:49

1 Answers1