Angular 2 How to style host element of the component

Question

I have component in Angular 2 called my-comp    lt my-comp gt  lt  my-comp gt    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

User · Accepted Answer

There was a bug  but it was fixed in the meantime   host     works fine now   Also supported are    host selector          for selector to match attributes  classes      on the host element  host-context selector          for selector to match elements  classes     on parent components selector  deep  selector  alias selector  gt  gt  gt  selector doesn t work with SASS  for styles to match across element boundaries   UPDATE  SASS is deprecating  deep   Angular  TS and Dart  added   ng-deep as a replacement that s also compatible with SASS  UPDATE2    slotted   slotted is now supported by all new browsers and can be used with  ViewEncapsulation ShadowDom https   developer mozilla org en-US docs Web CSS   slotted    See also Load external css style into Angular 2 Component   deep  and  gt  gt  gt  are not affected by the same selector combinators that in Chrome which are deprecated  Angular emulates  rewrites  them  and therefore doesn t depend on browsers supporting them   This is also why  deep  and  gt  gt  gt  don t work with ViewEncapsulation Native which enables native shadow DOM and depends on browser support

User · Answer

In your Component you can add  class to your host element if you would have some general styles that you want to apply   export class MyComponent        HostBinding  class   classes    classA classB

User · Answer

Try the  host    deep     Add the following to the parent component less file   host        deep  app-child-component            your child style           Replace the app-child-component by your child selector

User · Answer

For anyone looking to style child elements of a  host here is an example of how to use   ng-deep   host  ng-deep  lt child element gt   e g  host  ng-deep span   color  red     As others said  deep  is deprecated

User · Answer

I have found a solution how to style just the component element  I have not found any documentation how it works  but you can put attributes values into the component directive  under the  host  property like this    Component               styles            host            style    display  table  height  100             class    myClass              export class MyComponent       constructor              Also you can use  HostBinding decorator      HostBinding  style background-color   public color  string    lime        HostBinding  class highlighted   public highlighted  boolean   true      UPDATE  As G  nter Z  chbauer mentioned  there was a bug  and now you can style the host element even in css file  like this    host

User · 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  lt div class  root  gt  and style this div    Component           View     template         lt div class  root  gt         lt h2 gt Hello Angular2  lt  h2 gt         lt p gt here is your template lt  p gt       lt  div gt         styles          root         background  blue                        class SomeComponent      See this plunker

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

Examples related to css

Examples related to angular

Examples related to css-selectors

Examples related to angular-components