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 to share