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
– Günter Zöchbauer, Commented Oct 18, 2016 at 7:50

Günter Zöchbauer · Accepted Answer · 2016-10-18 07:49:39Z

11

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, 2016 at 7:49

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ok !! Thanks a lot :)