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.
You have two options
host property@Component({
selector : 'my-component',
host : {
'[style.color]' : "'red'",
'[style.background-color]' : 'backgroundColor'
}
})
class MyComponent {
backgroundColor: string;
constructor() {
this.backgroundColor = 'blue';
}
}
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.
The Best Simple Way!👇
in your.component.css:
:host {
background-color: blue;
}