Binding value to style

Question

I m trying to bind a color property from my class  acquired by attribute binding  to set the background-color of my div   import  Component  Template  from  angular2 angular2     Component     selector   circle     bind        color   color          Template     url  System baseURL     components circle template html      export class Circle       constructor                changeBackground   string          return  background-color     this color                  My template    lt style gt       circle          width 50px          height  50px          background-color  lightgreen          border-radius  25px         lt  style gt   lt div class  circle   style   changeBackground    gt       lt content gt  lt  content gt   lt  div gt    The usage of this component    lt circle color  teal  gt  lt  circle gt    My binding is not working  but doesn t throw any exceptions either   If I would put   changeBackground     somewhere in the template  that does return the correct string   So why is the style binding not working   Also  how would I watch the changes to the color property inside the Circle class  What is the replacement for   scope  watch  color   function a b         in Angular 2

User · Answer

In your app component html use     ngStyle   quot   background-color  backcolor  quot    In app ts declare variable of string type backcolor string   Set the variable this backcolor  quot red quot

User · Answer

As of now  Jan 2017   Angular   2 0  you can use the following   changeBackground    any       return    background-color   this color        and   lt div class  circle   ngStyle   changeBackground    gt       lt  --  lt content gt  lt  content gt  -- gt   lt  -- content is now deprecated -- gt       lt ng-content gt  lt ng-content gt   lt  -- Use ng-content instead -- gt   lt  div gt    The shortest way is probably like this    lt div class  circle   ngStyle      background-color   color    gt       lt  --  lt content gt  lt  content gt  -- gt   lt  -- content is now deprecated -- gt       lt ng-content gt  lt ng-content gt   lt  -- Use ng-content instead -- gt   lt  div gt

User · Answer

Try  attr style   changeBackground

User · Answer

I managed to make it work with alpha28 like this   import  Component  View  from  angular2 angular2     Component     selector   circle      properties    color  color        View       template    lt style gt       circle          width 50px          height  50px          border-radius  25px         lt  style gt   lt div class  circle   style background-color   changeBackground    gt       lt content gt  lt  content gt   lt  div gt       export class Circle       color       constructor               changeBackground    string           return this color            and called it like this  lt circle color  yellow  gt  lt  circle gt

User · Answer

Turns out the binding of style to a string doesn t work  The solution would be to bind the background of the style     lt div class  circle   style background   color  gt

[angular] Binding value to style

Examples related to angular