CODEWITHSUNDEEP
htmlcssangular
Florian Ludewig
Florian Ludewig

Reputation: 6012

Angular 6 set Background Color in Html to CSS Variable

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>

Upvotes: 7

Views: 23194

Answers (3)

Matan Shushan
Matan Shushan

Reputation: 1274

You can do it in 2 ways

  1. use pipe that get a string and return some color code code.

    <div [style.background-color]="someString | colorSetter"></div>

  2. add to the html tag a dynamic class for example:

    <div class="my-div" [class]="someClassName"></div>

and in the scss add the options

scss:

.my-div{
    &.optoin1{
       background-color:red;
     }
&.optoin2{
       background-color:black;
     }
&.optoin3{
       background-color:green;
     }
&.optoin4{
       background-color:yellow;
     }
}

Upvotes: 5

Martin Parenteau
Martin Parenteau

Reputation: 73761

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.

Upvotes: 8

Gurvinder Guraya
Gurvinder Guraya

Reputation: 669

You have to use ngStyle

<some-element [ngStyle]="{'background-color': styleExp}">...</some-element>

https://angular.io/api/common/NgStyle

Upvotes: 18

Related Questions