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!
Table of Contents
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
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