CODEWITHSUNDEEP
cssangularjsng-style
Nishant
Nishant

Reputation: 358

How to use ng-style with !important?

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>

Upvotes: 8

Views: 25655

Answers (5)

Sunny
Sunny

Reputation: 119

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>

Upvotes: 0

Sensei James
Sensei James

Reputation: 2695

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.

Upvotes: 7

Jeff Tian
Jeff Tian

Reputation: 5893

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' || ''}}")

Upvotes: 0

surajit das
surajit das

Reputation: 31

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.

Upvotes: 3

muenchdo
muenchdo

Reputation: 2181

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.

Upvotes: 1

Related Questions