Edit dynamically pseudo elements with angular 2

I am trying to dynamically edit this css property in angular 2 project but with no success :(

 progress::-moz-progress-bar {
            background: #278ce2;
        }

      

I want to add n progressbars to the same page. The background color is user-selectable and dynamically toggled. The idea was to add a css property to each bar created like this:

 classname::-moz-progress-bar {
        background: color;
    }
 classname::-webkit-progress-value {
        background: color;
    }
 classname[aria-valuenow]:before {
        background: color;
    }

      

As I want to create as many bars as the user wants, I cannot name the classes before.

Does anyone have any ideas on how to do this? If you need more information, just ask me.

+3


source to share


1 answer


There is no way to know how to edit these pseudo-elements. But I managed to do what I want by recreating the progress bars from the div. Here is the code in case it can help someone:

In HTML (since Angular 2)

<div class="probar">
  <div class="inside-probar" [ngStyle]="{background:color, width: ((value * 100)/max) + '%'}">
    {{value}}/{{max}}
  </div>
</div>

      



In CSS

.probar{
  height: 20px;
  width: 140px;
  border-radius: 5px;
  background: #ccc;
  padding: 3px;
}

.inside-probar{
  text-align: center;
  height: 20px;
  width: 100%;
  max-width: 100%;
  border-radius: 5px;
  margin-left: 0px;
  color: black;
}

      

0


source







All Articles