Dynamic change of pseudo-element's style in Angular2 directive

Question

There is a way to dynamic change of pseudoelement's style by @HostBinding or other way in Angular2?

I wrote a directive for range inputs, and I would like to changing slider color depend on value.

export class AwesomeRangeDirective implements OnInit {

    @Input() firstColor: string;

    @Input() lastColor: string;

    colorPalette: string[] = [];

    @HostBinding('style.background')
    color: string = '#FFFFFF';

    ngOnInit(): void {
        this.calculateColorPalette(20);
    }

    private calculateColorPalette(volume: number) {
        const firstRGB = this.hexToRgb(this.firstColor);
        const lastRGB = this.hexToRgb(this.lastColor);
        let percent: number;
        let color: RGBColor;
        for (let iterator = 0; iterator < volume; iterator++) {
            percent = iterator / volume;
            color = this.calculateColor(firstRGB, lastRGB, percent);
            this.colorPalette.push(this.rgbToHex(color));
        }
    }
}

And for #FFFFFF and #000000 colors I got correctly array of colors.

["#ffffff", "#f2f2f2", "#e5e5e5", "#d8d8d8", "#cccccc", "#bfbfbf", "#b2b2b2", "#a5a5a5", "#999999", "#8c8c8c", "#7f7f7f", "#727272", "#666666", "#595959", "#4c4c4c", "#3f3f3f", "#333333", "#262626", "#191919", "#0c0c0c"]

I can change dynamically background color of input using @HostBinding, but i totally don't know how can I change color of psudoelement:

input[type=range]::-webkit-slider-thumb {
  background: #000000;
}

Is it possible at all? How can I do this without creating a separate component for slider?

Dynamic change of pseudo-element's style in Angular2 directive

0 Answers0