change width in ::before property using angular and css

Asked Mar 25 '20 at 09:19

Active Mar 25 '20 at 09:34

Viewed 54 times

How can I change the width value in ::before property dynamically? Want to achieve this:

ts:

fillWidth: number = '50%';

html:

<div class="track">
  <div class="step featured-w" [ngStyle]="{'--featured-w': fillWidth}"></div>
</div>

CSS:

.track .step::before {
    height: 13px;
    position: absolute;
    content: "";
    width: var(--featured-w); // this is not working, to increase green part 
    left: 0;
    top: 15px;
}

I tried this: Assign variable to CSS

edited Mar 25 '20 at 09:34

asked Mar 25 '20 at 09:19

Pathik Vejani

4,263
8
57
98

you are missing the unit `px` or `%` – Temani Afif Mar 25 '20 at 09:21
@TemaniAfif tried that, not working – Pathik Vejani Mar 25 '20 at 09:21
shouldn't it be [ngStyle]="{'width': fillWidth}" – Duki Mar 25 '20 at 09:23
@Duki want to change `width` in `::before` – Pathik Vejani Mar 25 '20 at 09:26
show us how you tried that – Temani Afif Mar 25 '20 at 09:28
Have you seen this answer? https://stackoverflow.com/a/41371037/8583669 I think that you can't simply update the css variable using `[ngStyle]` – johannchopin Mar 25 '20 at 09:29
2

Does this answer your question? [Control css variable from angular 5](https://stackoverflow.com/questions/49903552/control-css-variable-from-angular-5) – johannchopin Mar 25 '20 at 09:33
@TemaniAfif lie this `fillWidth: number = '50%';` – Pathik Vejani Mar 25 '20 at 09:35
@johannchopin no, not helping that ansr – Pathik Vejani Mar 25 '20 at 09:36
@PathikVejani Have you tried to update this css variable without using `[ngStyle]`? – johannchopin Mar 25 '20 at 09:44
@johannchopin yes, but it is impacting on grey area not green. – Pathik Vejani Mar 25 '20 at 09:48
checkout this link https://stackoverflow.com/questions/35280118/change-style-of-pseudo-elements-in-angular2 – Duki Mar 25 '20 at 09:58

change width in ::before property using angular and css

0 Answers0