Dynamically updating css in Angular 2

Question

Let s say I have an Angular2 Component    home component ts  import   Component   from  angular2 core     Component       selector   home       templateUrl   app components templates home component html       styleUrls    app components styles home component css      export class HomeComponent       public width  Number      public height  Number       The template html file for this component    home component html   lt div class  home-component  gt Some stuff in this div lt  div gt    And finally the css file for this component    home component css   home-component      background-color  red      width  50px      height  50px      As you can see there are 2 properties in the class  width and height  I would like the css styles for width and height to match the values of the width and height properties and when the properties update  the width and height of the div update  What is the proper way to accomplish this

User · Answer

you can achive this by calling a function also   lt div  style width px   getCustomeWidth    gt  lt  div gt     getCustomeWidth           do what ever you want here     return customeWidth

User · Answer

If you want to set width dynamically with variable than use    braces instead          lt div  style width px    widthVal     style height px    heightVal   gt  lt  div gt     lt div  style width      widthVal     style height      heightVal   gt  lt  div gt

User · Answer

You can also use hostbinding   import   HostBinding   from   angular core    export class HomeComponent        HostBinding  style width   width  Number       HostBinding  style height   height  Number       Now when you change the width or height property from within the HomeComponent  this should affect the style attributes

User · Answer

All the above answers are great  But if you were trying to find a solution that won t change the html files below is helpful   ngAfterViewChecked        this renderer setElementStyle targetItem nativeElement   height   textHeight  px        You can import renderer from import  Renderer  from   angular core

User · Answer

I liked the look of WenhaoWuI s idea above  but I needed to identify the div with class  ui-tree in the PrimeNG tree component to set the height dynamically   All the answers I could find required the div to be named  ie  treediv  to enable the use of  ViewChild     ViewChildren     ContentChild     ContentChilden   etc  This was messy with a third party component   I finally found a snippet from G  nter Z  chbauer    ngAfterViewInit       this elRef nativeElement querySelector   myClass        This made it easy    Input   height  number  treeheight  number   400    default value  constructor private renderer  Renderer2  private elRef  ElementRef        ngOnInit         this loading   true      if  this height    null            this treeheight   this height              ngAfterViewInit         this renderer setStyle this elRef nativeElement querySelector   ui-tree     height   this treeheight    px

User · Answer

This should do it    lt div class  home-component         style width   width    px          style height   height    px   gt Some stuff in this div lt  div gt

User · Answer

Check working Demo here  import  Component bind  from  angular2 core   import  bootstrap  from  angular2 platform browser   import  FORM DIRECTIVES  from  angular2 form    import  Directive  ElementRef  Renderer  Input ViewChild AfterViewInit  from  angular2 core     Component     selector   my-app       template         lt style gt          myStyle          width 200px          height 100px          border 1px solid          margin-top 20px          background gray          text-align center                lt  style gt              lt div  class myStyle   my   style background-color   randomColor   style width   width  px    style height   height  px   gt  my width   width    amp  height   height   lt  div gt             directives         export class AppComponent     my boolean true    width number 200px    height number 100px    randomColor    randomNumber    intervalId    textArray          blue        green        yellow        orange        pink           constructor            this start               start                    this randomNumber   Math floor Math random   this textArray length           this randomColor this textArray this randomNumber           console log  start    this randomNumber           this intervalId   setInterval     gt            this width this width 20           this height this height 10           console log this width       this height           if this width  300                        this stop                           1000                 stop                   console log  stop            clearInterval this intervalId           this width 200          this height 100          this start                 bootstrap AppComponent

User · Answer

You can dynamically change the style width and height  of div by attaching dynamic value to inline  style width  and  style hiegh  property of div   In your case you can bind width and height property of HomeComponent  class with the div s inline style width and height property like this     As directed by Sasxa   lt div class  home-component         style width   width    px          style height   height    px   gt Some stuff in this div  lt  div gt    For the working demo take a look at this plunker http   plnkr co edit cUbbo2 p preview        our root app component import  Component  from  angular2 core   import  FORM DIRECTIVES FormBuilder AbstractControl ControlGroup   from  angular2 common     Component     selector   home     providers        template          lt div class  home-component   style width   width  px    style height   height  px   gt Some this div lt  div gt        lt br  gt        lt form  ngFormModel   testForm  gt          width  lt input type  number   ngFormControl   txtWidth   gt   lt br gt          Height  lt input type  number  ngFormControl   txtHeight    gt        lt  form gt         styles            home-component          background-color  red          width  50px          height  50px                 directives   FORM DIRECTIVES     export class App     testForm ControlGroup    public width  Number    public height  Number    public txtWidth AbstractControl    public txtHeight AbstractControl     constructor private  fb FormBuilder          this testForm  fb group            txtWidth    50             txtHeight    50                    this txtWidth this testForm controls  txtWidth          this txtHeight this testForm controls  txtHeight           this txtWidth valueChanges subscribe val  gt this width val         this txtHeight valueChanges subscribe val  gt this height  val

User · Answer

Try this    lt div class  home-component     style width px   width     style height px   height  gt Some stuff in this div lt  div gt     Updated   To set in   use   style height     height  gt Some stuff in this div lt  div gt

User · Answer

In Html   lt div  style maxHeight   quot maxHeightForScrollContainer    px  quot  gt   lt  div gt   In Ts this maxHeightForScrollContainer   200   your custom maxheight

User · Answer

To use   instead of px or em with  Gaurav s answer  it s just    lt div class  home-component   style width     80   style height     95  gt  Some stuff in this div lt  div gt

User · Answer

The accepted answer is not incorrect   For grouped styles one can also use the ngStyle directive    lt some-element  ngStyle     font-style   styleExpression   font-weight   12   gt     lt  some-element gt    The official  docs are here

[css] Dynamically updating css in Angular 2

Examples related to css

Examples related to angular