Dynamic classname inside ngClass in angular 2

Question

I need to interpolate a value inside of an ngClass expression but I can t get it to work   I tried these solution which are the only ones that makes sense to me  these two fails with the interpolation    lt button  ngClass       namespace  -mybutton   type      mybutton    gt  lt  button gt   lt button  ngClass    namespace    -mybutton   type      mybutton    gt  lt  button gt    This one works with the interpolation but fails with the dynamically added class because the entire string gets added as a class    lt button ngClass      namespace  -mybutton   type      mybutton    gt  lt  button gt    So my question is how do you use dynamic classnames in ngClass like this

User · Answer

lt div  ngFor  let celeb of singers  gt     lt p  ngClass          text-success  celeb country      USA        text-secondary  celeb country      Canada        text-danger  celeb country      Puorto Rico        text-info  celeb country      India       gt    celeb artist        celeb country      lt  p gt   lt  div gt

User · Answer

You can use  lt i  className    fa fa-    data  icon  gt   lt  i gt

User · Answer

Here s an example of something I m doing for multiple classes with multiple conditions    ngClass    variableInComponent     anotherVariableInComponent   classes icon large   classes icon small  editing   classes icon editing         where  classes is an object containing strings of various classnames  e g  class icon large    app  icon--large   It s dynamic  Updates as the conditions update

User · Answer

i want to mention some important point to bare in mind while implementing class binding        ngClass            badge-secondary   somevariable      value1       badge-danger   somevariable      value1       badge-warning   somevariable      value1       badge-warning   somevariable      value1       badge-success   somevariable      value1       class here is not binding correctly because one condition is to be met  whereas you have two identical classes  badge-warning  that may have two different condition  To correct this     ngClass            badge-secondary   somevariable     value1       badge-danger   somevariable      value1       badge-warning   somevariable      value1    somevariable      value1        badge-success   somevariable      value1

User · Answer

Try    lt button  ngClass   type      mybutton    namespace    -mybutton        gt  lt  button gt    instead   or   lt button  ngClass    type      mybutton    namespace    -mybutton         gt  lt  button gt    or even   lt button class    type      mybutton    namespace    -mybutton          gt  lt  button gt    will work but extra benefit of using ngClass is that it does not overwrite other classes that are added by any other method  eg   class xyz  directive or class attribute   etc   as class does   Angular 9 Update  The new compiler  Ivy  brings more clarity and predictability to what happens when there are different types of class-bindings on the same element  Read More about it here     ngClass takes three types of input   Object  each key corresponds to a CSS class name   you can t have dynamic keys  because key  key   key  are all same  and  key  is not supported AFAIK  Array  can only contain list of classes  no conditions  although ternary operator works String  expression  just like normal class attribute

User · Answer

more elegant solution is to use  amp  amp   using NgFor and its first  its free to use ur own matching tho        lt div           ngFor  quot let day of days                  let first   first  quot          class  quot day quot           ngClass   quot first  amp  amp    day--    day  quot       lt  div gt   will turn out as  class  quot day day--monday quot

User · Answer

Is basically duplication of the other answers - but I didn t get it completely  maybe someone will finally understand it with this example now   ngClass   quot   svg-icon    recolor-    recolor  size    size-    size       quot   will result for e g  in class  quot svg-icon recolor-red size-m quot

User · Answer

This one should work   lt button  ngClass     namespace    -mybutton    type      mybutton    gt  lt  button gt    but Angular throws on this syntax  I d consider this a bug  See also https   stackoverflow com a 36024066 217408  The others are invalid  You can t use    together with       Either one or the other       binds the result stringified which doesn t lead to the desired result in this case because an object needs to be passed to ngClass   Plunker example  As workaround the syntax shown by  A Sing or    lt button  ngClass   type      mybutton    namespace    -mybutton        gt  lt  button gt    can be used

[angular] Dynamic classname inside ngClass in angular 2

Examples related to angular