I am using Angular 6 and I have a simple div
and want to set the background color of this div
from inside the template. This works fine when passing normal colors. But this does not work with CSS Variables.
This example works
<div [style.background]="'red'">...</div>
This example does not work
<div [style.background]="'var(--some-css-var)'">...</div>
You have to use ngStyle
<some-element [ngStyle]="{'background-color': styleExp}">...</some-element>
https://angular.io/api/common/NgStyle
In order to bind a style property to a CSS variable in the HTML template, the CSS variable expression var(...)
must be sanitized. You can define a custom pipe:
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
@Pipe({
name: 'safeStyle'
})
export class SafeStylePipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer) { }
transform(value: string): SafeStyle {
return this.sanitizer.bypassSecurityTrustStyle(value);
}
}
and use it in the HTML template:
<div [style.background-color]="'var(--some-css-var)' | safeStyle"></div>
<div [style.background-color]="bkColor | safeStyle"></div>
bkColor = "var(--some-css-var)";
See this stackblitz for a demo.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With