How to use ng-style with !important?

Question

Tag Button already has cursor css assigned. I want to override cursor css according to is_active values to disable button. is_active may have values 0 or 1. Following is code for js/html please let me know correct method to apply cursor css to button.

$scope.ngStyleDisabled = function(status) {
  if (status == 1) {
    return {};
  } else if (status == 0) {
    return '{\'cursor\':\'not-allowed !important\',\'pointer-events\':\'none\'}';
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<button ng-style="{{ngStyleDisabled(item.is_active)}}">Action Button</button>

Meaghanmeagher

Answer 1

Spoiler alert: everyone who said ng-style does not support !important is *WRONG!!

*Well, sort of wrong. I.e. while it definitely isn't supported out of the box, you can force it with the following workaround (simplified here for convenience):

<elem data-ng-attr-style="{{ 'color: ' + your_color_var + ' !important' }}"></elem>

e.g.

<span data-ng-attr-style="{{ 'color: indigo !important' }}"></span>

Wait... so we have to use a hack to get !important working!?! That's like... a double hack!!! Or a double double cross!! A triple cross?!?

Lol.

Ossieossietzky

Answer 2

ng-style does not support !important.

So alternate is to use ng-class instead of ng-style, it will solve the problem.

If you want to use ng-style specifically then try to write within html itself- please don't try to write within any function.

Febrific

Answer 3

According to the documentation your expression needs to be an object:

Expression which evals to an object whose keys are CSS style names and values are corresponding values for those CSS keys.

Try returning an object instead of the string (using quoutes since the CSS properties might not be valid keys):

$scope.ngStyleDisabled = function(status) {
  if (status == 1) {
    return {};
  } else if (status == 0) {
    return {
      'cursor': 'not-allowed', // !important does not work in ng-style
      'pointer-events': 'none'
    };
  }
}

Also, leave out the curly braces in your template:

<button ng-style="ngStyleDisabled(item.is_active)">Action Button</button>

This JSFiddle shows how the properties are applied to the button.

NOTE According to this question and this GitHub issue, the !important keyword is not supported within the ng-style directive. You can find workarounds behind the links.

Serrulate

tried your code which returned result as <button ng-style="{"cursor":"not-allowed !important","pointer-events":"none"}">Action Button</button> – Meaghanmeagher

Is that not what you wanted? – Serrulate

This returned values with double quotes not in single quotes. – Meaghanmeagher

If you check the JSFiddle you can see that the properties are applied to the button as you requested. What is the issue? – Serrulate

Answer 4

The most elegant workaround mentioned in https://github.com/angular/angular.js/issues/5379 worked for me!

Example (written in jade/pug):

a#share-test-link.item(ng-show="iAmTeamCreator()", href="", data-ng-attr-style="{{iAmTeamCreator() && 'display: block!important' || ''}}")

Systole

Answer 5

Since !important usage is directly disallowed in ng-style (source: angular github issue mentioning the same).

Can just use angular attribute binding, and generate the style string via string concatenation:

<div
 [attr.style]="
    'font-family: ' + (selectedFontFamily ?? 'revert') +
    ';' +
    'font-size: ' + (selectedFontSize ?? 'revert') ">
</div>

Silsbye