Ways of binding CSS variables in Angular 12

In the article, we discuss the process of discovering the most common ways of binding CSS variables with example in Angular 12. and we will learn how  Angular set CSS variable dynamically just like JavaScript you can get and manipulate CSS variable values. let’s check out how!

Ways of binding css variables in Angular

We can bind CSS variables values in the template dynamically in different ways. for example, we may want to set the background color or text color of div ( any HTML element) depending on some calculation the below are a few ways to bind CSS variables in Angular.

Angular set CSS variable dynamically

Angular set CSS variable dynamically, we can create and update inline CSS custom property declarations using style binding. for example, let’s change the color of the element by adding the color name to the style at the runtime.

export class HostBindingComponent {

  constructor() { }

  @HostBinding("style.--color") color: string = '';

  ngOnInit(): void {
    this.color = 'red';
  }
}

You can replace the hard coded values with var() function, passing in CSS variable -color.

 :host {
     color: var(--color);
 }

Alright, now that we’re all set up – go to your browser and open the app. You’ll see that component all  HTML element text is red, as expected.

Angular Style Property Binding

To set a CSS variable for a specific component, add the variable inside of its selector. In this example, we will change the color of the following div element of the Angular component template.

<div class="container">
  <h2 [style.--color]="color">Hello from Angular</h2>
</div>

We’ve created “color” variables in the component and now we can access them in our component template.

export class AppComponent {
  color: string = '';

  ngOnInit() {
    this.color = "red";
  }
}

Let’s update our  CSS file of the component as well.

.container {
    h2 {
        color: var(--color);
    }
}

Using Directive and ElementRef

if you are using Angular 8 or the lower version, you can use ElementRef to implement the same. let’s look at some code. Here’s an approach to using ElementRef .

button {
    background-color: var(--background-color);
}

Custom attributes can be used as part of a value or as the entire value, as shown below:

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({
  selector: '[bindCss]'
})
export class BindCssDirective {

  @Input("variableName") variableName: string;
  @Input("variableValue") variableValue: string;

  constructor(private host: ElementRef<HTMLElement>) { }

  ngOnInit(changes: any) {
    this.host.nativeElement.style.setProperty(`--${this.variableName}`, this.variableValue);
  }
}

 in JavaScript, we use setProperty on documentElement’s style property:

document.documentElement.style.setProperty('--my-variable-name', 'red');

in component’s  template.

<div class="container">
    <div bindCss [variableName]="variableName" [variableValue]="variableValue">
        directive bind css
    </div>
</div>

Next, we update the custom property in our Angular component:

export class BindCssDirectiveComponent implements OnInit {

  constructor() { }
  variableName: string;
  variableValue: string;

  ngOnInit(): void {
    this.variableName = 'background-color';
    this.variableValue = 'red';
  }
}

Related Post

ForRoot and ForChild singleton pattern in Angular 11

Data Binding In Angular 11: one-way and two-way data binding

Source code available for download

The source code is available on GitHub for the Ways of binding CSS variables in Angular 12

URL: https://github.com/decodedscript/decodedscript-realtime-chat-app-angular

Scroll to Top