Ravi Teja Gudapati Ravi Teja Gudapati - 5 months ago 450
AngularJS Question

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

I have component in Angular 2 called my-comp:

<my-comp></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.

Thanks.

Answer

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({ ... })
@View({
  template: `
    <div class="root">
      <h2>Hello Angular2!</h2>
      <p>here is your template</p>
    </div>
  `,
  styles: [`
    .root {
      background: blue;
    }
  `],
   ...
})
class SomeComponent {}

See this plunker