How to add class to host element

Question

I dont t know how to add to my component  lt component gt  lt  component gt  a dynamic class attribute but inside the template html  component html     The only solution I found is to modify the item via  ElementRef  native element  That solution seems a little complicated to do something that should be very simple   Another problem is that CSS has to be defined outside component scope  breaking component encapsulation   Is there a simpler solution  Something like  lt root  class        gt        lt   root gt  inside the template

User · Answer

If you want to add a dynamic class to your host element, you may combine your HostBinding with a getter as

@HostBinding('class') get class() {
    return aComponentVariable
}

Stackblitz demo at https://stackblitz.com/edit/angular-dynamic-hostbinding

User · Answer

Another problem is that CSS has to be defined outside component scope  breaking component encapsulation  This is not true  With scss  SASS  you can easily style the component  itself host  as so   host       display  block      position  absolute      width  100       height  100       pointer-events  none      visibility  hidden        amp  someClass           visibility  visible           This way the encapsulation is  quot unbroken quot

User · Answer

for multiple classes situation  as  jbojcic mentioned above  you can use  host   class   A B C

User · Answer

Here s how I did it  Angular 7    In the component  add an input     Input   componentClass  string         Then in the component s HTML template add something like    lt div  ngClass   componentClass  gt     lt  div gt    And finally in the HTML template where you instance the component    lt root componentClass  someclass someotherclass  gt     lt  root gt    Disclaimer  I m fairly new to Angular  so I might be just getting lucky here

User · Answer

G  nter s answer is great  question is asking for dynamic class attribute  but I thought I would add just for completeness     If you re looking for a quick and clean way to add one or more static classes to the host element of your component  i e   for theme-styling purposes  you can just do    Component      selector   my-component      template   app-element      host    class    someClass1      export class App implements OnInit           And if you use a class on the entry tag  Angular will merge the classes  i e     lt my-component class  someClass2  gt    I have both someClass1  amp  someClass2 applied to me  lt  my-component gt

User · Answer

This way you don t need to add the CSS outside of the component    Component      selector   body      template   app-element         prefer decorators  see below        host         class someClass    someField      export class App implements OnInit     constructor private cdRef ChangeDetectorRef          someField  boolean   false       alternatively also the host parameter in the  Component    decorator can be used    HostBinding  class someClass   someField  boolean   false     ngOnInit         this someField   true     set class  someClass  on   lt body gt         this cdRef detectChanges            Plunker example This CSS is defined inside the component and the selector is only applied if the class someClass is set on the host element  from outside    host  someClass      background-color  red

User · Answer

You can simply add  HostBinding  class   class    someClass   inside your  Component class   Example    Component      selector   body      template   app-element            export class App implements OnInit       HostBinding  class   class    someClass      constructor               ngOnInit

[angular] How to add "class" to host element?

Examples related to angular

Examples related to angular2-template