Ravi Teja Gudapati Ravi Teja Gudapati - 1 year ago 947
AngularJS Question

Angular 2: How to style host element of the component?

I have component in Angular 2 called my-comp:


How does one style the host element of this component in Angular 2?

In Polymer, You would use ":host" selector. I tried it in Angular 2. But it doesn't work.

:host {
display: block;
width: 100%;
height: 100%;

I also tried using the component as selector:

my-comp {
display: block;
width: 100%;
height: 100%;

Both approaches don't seem to work.


Answer Source

Check out this issue. I think the bug will be resolved when new template precompilation logic will be implemented. For now I think the best you can do is to wrap your template into <div class="root"> and style this div:

@Component({ ... })
  template: `
    <div class="root">
      <h2>Hello Angular2!</h2>
      <p>here is your template</p>
  styles: [`
    .root {
      background: blue;
class SomeComponent {}

See this plunker

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download