Angular assign css variable to before after class - html

Question

Im trying to pass variable with [ngStyle] and read it on ::before class but unfortunately cannnot do it,
could someone point me on a right direction?
CSS:
.handle-slider__control {
height: 7px;
z-index:1;
background: $colour-alto;
position: relative;
margin:50px auto;
margin-bottom: 16px;
&.handle-slider__control--markers {
margin-bottom: 0;
}
}
.handle-slider__control::before {
position: absolute;
z-index:-1;
content:"";
left: var(--left);
right: var(--right);
background: $colour-red;
height:100%;
}
HTML:
<div [ngStyle]="getRangeColours()" class="handle-slider__control"></div>
And JS method:
getRangeColours()
{
return {"--left": "10%","--right": "10%"};
}
There is no information about wrongly passed data or anything. Im trying to change css parameters left, right based on data that are in component. If there is any other way to do it I would also consider it. THANKS!

Answer 1

Tested in Angular 9.1.11
test.component.ts
import { Component, OnInit, HostBinding } from '#angular/core';
#Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {
#HostBinding('style.--left.%') left: number = 20; // Change it to any Number at any point
#HostBinding('style.--right.%') right: number;
constructor() {}
ngOnInit(): void {
this.right = 10; // Change it to any Number at any point
}
}
test.component.html
<h2 class="handle-slider__control">CSS Variables in Angular</h2>
test.component.scss
.handle-slider__control {
height: 7px;
z-index:1;
background: blue;
position: relative;
margin:50px auto;
margin-bottom: 16px;
&.handle-slider__control--markers {
margin-bottom: 0;
}
}
.handle-slider__control::before {
position: absolute;
z-index:-1;
content:"";
left: var(--left);
right: var(--right);
background: red;
height:100%;
}
For Lower versions, try this (couldn't test though):
import { DomSanitizer } from '#angular/platform-browser';
public value: string;
#HostBinding("attr.style")
public get leftStyle(): any {
return this.sanitizer.bypassSecurityTrustStyle(`--left: value`);
}
constructor(private sanitizer: DomSanitizer) {
this.value = '10%';
}

Answer 2

About css variales thare are differents insteresting links about this, Take a look here or here, e.g.
I don't check it but
document.documentElement.style.setProperty('--left', "10%");
document.documentElement.style.setProperty('--rigth', "20%");
must be work

Answer 3

I just used different class instead of pseudocode with ngStyle on it like that:
.slider-colour-control {
position: absolute;
z-index:-1;
content:"";
background: $colour-red;
height:100%;
}