How do I conditionally apply CSS styles in AngularJS

Question

Q1  Suppose I want to alter the look of each  item  that a user marks for deletion before the main  delete  button is pressed    This immediate visual feedback should eliminate the need for the proverbial  are you sure   dialog box   The user will check checkboxes to indicate which items should be deleted   If a checkbox is unchecked  that item should revert back to its normal look   What s the best way to apply or remove the CSS styling   Q2  Suppose I want to allow each user to personalize how my site is presented   E g   select from a fixed set of font sizes  allow user-definable foreground and background colors  etc   What s the best way to apply the CSS styling the user selects inputs

User · Answer

This works well when ng-class can t be used  for example when styling SVG    ng-attr-class    someBoolean  amp  amp   class-when-true      class-when-false         I think you need to be on latest unstable Angular to use ng-attr-  I m currently on 1 1 4   I have published an article on working with AngularJS SVG  It talks about this issue and numerous others  http   www codeproject com Articles 709340 Implementing-a-Flowchart-with-SVG-and-AngularJS

User · Answer

Here s how i conditionally applied gray text style on a disabled button  import   Component   from   angular core     Component     selector   my-app     styleUrls       app component css       template       lt button       click   buttonClick1          disabled     btnDisabled       ngStyle     color    btnDisabled    gray    black    gt        btnText      lt  button gt      export class AppComponent      name    Angular     btnText    Click me     btnDisabled   false    buttonClick1         this btnDisabled   true      this btnText    you clicked me       setTimeout      gt          this btnText    click me again         this btnDisabled   false          5000           Here s a working example  https   stackblitz com edit example-conditional-disable-button file src 2Fapp 2Fapp component html

User · Answer

span class  circle circle-  selectcss document Extension     gt    and code   scope selectcss   function  data        if  data      pdf           return  circle circle-pdf       else         return  circle circle-small        css    circle-pdf       width  24px      height  24px      font-size  16px      font-weight  700      padding-top  3px      -webkit-border-radius  12px      -moz-border-radius  12px      border-radius  12px      background-image  url images pdf icon32 png

User · Answer

I have found problems when applying classes inside table elements when I had one class already applied to the whole table  for example  a color applied to the odd rows  lt myClass tbody tr nth-child even  td gt    It seems that when you inspect the element with Developer Tools  the element style has no style assigned  So instead of using ng-class  I have tried using ng-style  and in this case  the new CSS attribute does appear inside element style  This code works great for me    lt tr ng-repeat  element in collection  gt           amazing code           lt td ng-style  myvar     0  amp  amp    background-color    red                        myvar     1  amp  amp    background-color    green                        myvar     2  amp  amp    background-color    yellow    gt    myvar    lt  td gt           more amazing code       lt  tr gt    Myvar is what I am evaluating  and in each case I apply a style to each  lt td gt  depending on myvar value  that overwrites the current style applied by the CSS class for the whole table   UPDATE  If you want to apply a class to the table for example  when visiting a page or in other cases  you can use this structure    lt li ng-class    active  isActive   route a      isActive   route b     gt    Basically  what we need to activate a ng-class is the class to apply and a true or false statement  True applies the class and false doesn t  So here we have two checks of the route of the page and an OR between them  so if we are in  route a OR we are in route b  the active class will be applied   This works just having a logic function on the right that returns true or false   So in the first example  ng-style is conditioned by three statements  If all of them are false  no style is applied  but following our logic  at least one is going to be applied  so  the logic expression will check which variable comparison is true and because a non empty array is always true  that will left an array as return and with only one true  considering we are using OR for the whole response  the style remaining will be applied   By the way  I forgot to give you the function isActive      rootScope isActive   function viewLocation        return viewLocation      location path         NEW UPDATE  Here you have something I find really useful  When you need to apply a class depending on the value of a variable  for example  an icon depending on the contents of the div  you can use the following code  very useful in ng-repeat     lt i class  fa  ng-class     fa-github      type     0                             fa-linkedin    type     1                             fa-skype       type     2                             fa-google      type     3    gt  lt  i gt       Icons from Font Awesome

User · Answer

One thing to watch is - if the CSS style has dashes - you must remove them  So if you want to set background-color  the correct way is   ng-style   backgroundColor myColor

User · Answer

well i would suggest you to check condition in your controller with a function returning true or false     lt div class  week-wrap  ng-class   today  getTodayForHighLight todayDate  day date    gt   day date   lt  div gt    and in your controller check the condition    scope getTodayForHighLight   function today  date       return  today    date

User · Answer

Angular provides a number of built-in directives for manipulating CSS styling conditionally dynamically    ng-class - use when the set of CSS styles is static known ahead of time ng-style - use when you can t define a CSS class because the style values may change dynamically   Think programmable control of the style values  ng-show and ng-hide - use if you only need to show or hide something  modifies CSS  ng-if - new in version 1 1 5  use instead of the more verbose ng-switch if you only need to check for a single condition  modifies DOM  ng-switch - use instead of using several mutually exclusive ng-shows  modifies DOM  ng-disabled and ng-readonly - use to restrict form element behavior ng-animate - new in version 1 1 4  use to add CSS3 transitions animations   The normal  Angular way  involves tying a model scope property to a UI element that will accept user input manipulation  i e   use ng-model   and then associating that model property to one of the built-in directives mentioned above     When the user changes the UI  Angular will automatically update the associated elements on the page    Q1 sounds like a good case for ng-class -- the CSS styling can be captured in a class   ng-class accepts an  expression  that must evaluate to one of the following    a string of space-delimited class names an array of class names a map object of class names to boolean values   Assuming your items are displayed using ng-repeat over some array model  and that when the checkbox for an item is checked you want to apply the pending-delete class    lt div ng-repeat  item in items  ng-class    pending-delete   item checked   gt         HTML to display the item         lt input type  checkbox  ng-model  item checked  gt   lt  div gt    Above  we used ng-class expression type  3 - a map object of class names to boolean values    Q2 sounds like a good case for ng-style -- the CSS styling is dynamic  so we can t define a class for this   ng-style accepts an  expression  that must evaluate to    an map object of CSS style names to CSS values   For a contrived example  suppose the user can type in a color name into a texbox for the background color  a jQuery color picker would be much nicer     lt div class  main-body  ng-style   color  myColor   gt             lt input type  text  ng-model  myColor  placeholder  enter a color name  gt     Fiddle for both of the above   The fiddle also contains an example of ng-show and ng-hide   If a checkbox is checked  in addition to the background-color turning pink  some text is shown   If  red  is entered in the textbox  a div becomes hidden

User · Answer

You can use ternary expression   There are two ways to do this    lt div ng-style  myVariable  gt  100     color    red       color    blue    gt  lt  div gt    or      lt div ng-style    color    myVariable  gt  100     red     blue     gt  lt  div gt

User · Answer

One more  in the future  way to conditionally apply style is by conditionally creating scoped style   lt style scoped type  text css  ng-if       gt    lt  style gt    But nowadays only FireFox supports scoped styles

User · Answer

Another option when you need a simple css style of one or two properties   View    lt tr ng-repeat  element in collection  gt          amazing code           lt td ng-style    background-color   getTrColor element myvar    gt             element myvar         lt  td gt          more amazing code      lt  tr gt    Controller    scope getTrColor   function  colorIndex        switch colorIndex           case 0  return  red           case 1  return  green           default  return  yellow

User · Answer

There is one more option that I recently discovered that some people may find useful because it allows you to change a CSS rule within a style element - thus avoiding the need for repeated use of an angular directive such as ng-style  ng-class  ng-show  ng-hide  ng-animate  and others   This option makes use of a service with service variables which are set by a controller and watched by an attribute-directive I call  custom-style    This strategy could be used in many different ways  and I attempted to provide some general guidance with this fiddle   var app   angular module  myApp     ui bootstrap     app service  MainService   function        var vm   this      app controller  MainCtrl   function MainService       var vm   this      vm ms   MainService      app directive  customStyle   function MainService       return           restrict    A           link   function scope  element  attr               var style   angular element   lt style gt  lt  style gt                 element append style               scope  watch function    return MainService theme                     function                        var css                           angular forEach MainService theme  function selector  key                           angular forEach MainService theme key   function val  k                               css    key         k       val                                                                                                       style html css                      true

User · Answer

See the following example   lt  DOCTYPE html gt       lt html ng-app gt       lt head gt       lt title gt Demo Changing CSS Classes Conditionally with Angular lt  title gt       lt script src  https   ajax googleapis com ajax libs angularjs 1 0 7 angular min js  gt  lt  script gt       lt script src  res js controllers js  gt  lt  script gt        lt style gt        checkboxList           border 1px solid  000          background-color  fff          color  000          width 300px          height  100px          overflow-y  scroll              uncheckedClass          background-color  eeeeee         color black             checkedClass           background-color  3ab44a          color white             lt  style gt        lt  head gt       lt body ng-controller  TeamListCtrl  gt       lt b gt Teams lt  b gt       lt div id  teamCheckboxList  class  checkboxList  gt        lt div class  uncheckedClass  ng-repeat  team in teams  ng-class    checkedClass   team isChecked   uncheckedClass    team isChecked   gt        lt label gt       lt input type  checkbox  ng-model  team isChecked    gt       lt span gt   team name   lt  span gt       lt  label gt       lt  div gt       lt  div gt       lt  body gt       lt  html gt

User · Answer

As of AngularJS v1 2 0rc  ng-class and even ng-attr-class fail with SVG elements  They did work earlier  even with normal binding inside the class attribute   Specifically  none of these work now   ng-class  current  this element  active        ng-attr-class    current  this element  active         class  class1 class2        current  this element  active          As a workaround  I ve to use   ng-attr-otherAttr    current  this element  active          and then style using   otherAttr  active            styles

User · Answer

This solution did the trick for me   lt a ng-style   true   paddingLeft   25px    false      deleteTriggered   gt     lt  a gt

[css] How do I conditionally apply CSS styles in AngularJS?

Examples related to css

Examples related to angularjs