Search code examples
javascriptcssangularcss-selectorspseudo-class

is there any way to attach an ngClass to a pseudo-class?

I am trying to put a dynamic style on this element:

input[type=range].MPslide.pvd-slider::-webkit-slider-runnable-track{}

Unfortunately it doesn't exist in my template so I can not place an [ngClass] on it. At the moment I am doing this by setting a global CSS variable onInit() but this seems like a workaround. What am I missing? Is there a cleaner way to do this? Thanks for any insights or suggestions!

Solution

  • Add a dynamic class on the container of your intended element (the component it's in) and do something like this

    // my-component.html
<the-component [class.myClass]="myCondition"></the-component>

    and

    // my-component.css
:host ::ng-deep .myClass input[type=range].MPslide.pvd-slider::-webkit-slider-runnable-track{
  // your dynamic style
}

    you can read more about :host and ::ng-deep from Angular style special selctor