NgStyle and style can not set `!important`

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting

Current behavior Both options will fail:

[ngStyle]="{'color':'red !important'}"
[style.color]="'red !important'"

Expected behavior !important is valid css usecase.

Reproduction of the problem https://plnkr.co/edit/abOMwv3tcYnnjqjCe4ff?p=preview

• Angular version: 2.0.0
• Browser: [all ]
• Language: [TypeScript 1.8.11]

[lazarljubenovic]

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.)

[vytautas-pranskunas-]

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); } }