Angular [ngStyle] 或 [style.background-color] 不适用于 '!important'

Question

In both situations, using '!important' it doesn't work as expected. If I remove the '!important', the background-color receives the change but it doesn't change cause of inheritance. But I want it to be '!important!'.

without '!important':

element.style {
    margin-right: 5px;
    *background-color: 'green';* (line-through)
}

with '!important':

element.style {
    margin-right: 5px;
}

I have already tryed:

[ngStyle]="{'background-color': myColor + ' !important'}"

and

[attr.style]="'background-color: ' + myColor  + ' !important'"

and

[style.background-color]="myColor  + '!important'"

The problem is that I'm generating buttons dynamically and during the generation I want to apply the background-color. That wya I can't use @ViewChild

Answer 1

1. [ngStyle] not works with !important . Instead of using ngStyle , you can implement it using [ngClass] .

2. To set values to [attr.style] , you need to make the style value to TrustStyle as follows.

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

Here is the safeStyle pipe content.

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