angular: NgStyle and style can not set `!important`

A quick advice for people trying to do this.

!important is used to override any other declaration, incluing declarations set to the element itself using the style attribute (and this is the only way to override them). You should almost never need to add !important directly to the element, because it makes little sense to do so.

<style> div { color: blue } </style>
<div style="color: red">I'm red, not blue! No need for !important</div>

The only time you need !important is when your CSS already has it.

<style> span { color: blue !important } </style>
<span style="color: red !important">I'm red now.</span>

But !important is already a bad practice in the stylesheet. Are you sure you want to do this in the actual attribute?

(It’s still a bug. But a bug that stops you from writing spaghetti styles.)

as a workaround you can do:

[attr.style]="('font-size:' + actions.fontSize + '% !important') | safeStyle"

where safeStyle is

@Pipe({ name: 'safeStyle' }) export class SafeStylePipe implements PipeTransform { constructor(private sanitizer: DomSanitizer) { } transform(value) { return this.sanitizer.bypassSecurityTrustStyle(value); } }

I think this should be possible. If you use bootstrap css framework it has css classes that set display:none !important. How should you override these classes if not by !important?

https://github.com/twbs/bootstrap/search?utf8=✓&q=display%3A+none+!important%3B

even if it is spaghetti css styles code to use !important it’s hard to avoid because of bootstrap css framework.

Issue opened since 2016. Seriously!??

I took a look at the source code and I don’t know if I’m right, but it seems to be a simple logical problem on Rederer2 implementation for browser platform.

https://github.com/angular/angular/blob/2b9cc8503d48173492c29f5a271b61126104fbdb/packages/platform-browser/src/dom/dom_renderer.ts#L194

setStyle(el: any, style: string, value: any, flags: RendererStyleFlags2): void {
    if (flags & RendererStyleFlags2.DashCase) {
      el.style.setProperty(
          style, value, !!(flags & RendererStyleFlags2.Important) ? 'important' : '');
    } else {
      el.style[style] = value;
    }
  }

It seems that it expects the Dashed value for the flags param to safely pass important flag to the broswer’s DOM API and then it tests again if the flags param is Important value…

Is it senseless for anyone else?

Please take this on ng10, its been 4 years

This is a bug - running into a roadblock right now because of it

You do indeed need important absolutely!!

Case - i’m setting the the background color of an element that is already styled using an !important, so the style I set, needs to override the other one.

I don’t even know how to proceed here.

When they ask why you don’t like Angular, I show this issue.

When they ask you why people don’t like Angular, I show this comment.

when are we getting official fix ?

Lowkey ridiculous that this is still open…

Who decided that this bug is a feature and it has to be there for more of 4 years?

When they ask why you don’t like Angular, I show this issue.

@rhartness Actually, it hasn’t even been addressed officially. My (heavily downvoted) comment was in that style, but I’m not a team member. Sorry if it looked official. It’s been just crickets about this since the start from the core team. I guess there’s always next year 😂

<div (mouseover)="hover=true" (mouseleave)="hover=false"> <span [ngStyle]="{backgroundColor: hover==true ? 'lightgrey' : 'grey' }">hello {{ hover }} </span> </div>

Any update on this? We are having to put workarounds in an already twiddly part of Angular. It’s making me fear upgrading the @angular packages.

The most significant problem here is that it is impossible to create dynamic rules, for other cases it is possible to use CSS classes.

I’m also hitting this roadblock.

Use case: Trying to set a dynamic background-size.% on a SVG background-image in Chrome.

Chrome will not render properly unless the !important suffix is used, even with the correct specificity (confirmed in Chrome dev tools). This may or may not be a bug in Chrome but indeed the !important feature is needed in the real world!

Sure we can hack CSSStyleDeclaration.setProperty(), but Angular should take care of these things, or at least give the option to override, as it is very often required when using third-party libraries.