Can an Angular 2 component style itself?

Question

In Angular 2 you can include a stylesheet in a component's template. Because of Angular 2's View Encapsulation the styles only apply to the containing elements.

Is there a way to style the component's main tag without putting a surrounding <div class="component-wrapper"></div>?

Example plnkr: http://plnkr.co/edit/rANAsR1h9ERBIZV6wuJ8

It has an external css file adding a border and padding to the <app> tag, and the template attempts to set a background color.

Answer 1

You have two options

• Use host property

@Component({     selector : 'my-component',     host : {         '[style.color]' : "'red'",          '[style.background-color]' : 'backgroundColor'     } }) class MyComponent {     backgroundColor: string;     constructor() {         this.backgroundColor = 'blue';     } } 

• Use styles property and :host

@Component({     selector : 'my-component',     styles : [`         :host {             color: red;             background-color: blue;         }     `] }) class MyComponent {} 

Note there's an odd behavior when using :host and ViewEncapsulation.None.

Here's a plnkr with simple examples for both alternatives.