In angular , How to use component variable in style

Question

I want to use a variable width in my angular 5 component template, just like this:

<style>
    input:checked + .slider:before {
        transform: translateX({{width}}px);
    }
</style>

While 'width' is a variable defined in component!

however the "{{width}}" is not parsed ,how to implement this function.thanks!

you should be having it as variable and use inline style or apply using a class — Aravind
– Aravind, Commented Jan 17, 2018 at 7:02

Mohammad Kermani · Accepted Answer · 2018-01-17 07:11:04Z

3

You can use Angular ngStyle in this case:

[ngStyle]="{ width: width }"

Take a look at this demo

answered Jan 17, 2018 at 7:11

Mohammad Kermani

5,4368 gold badges39 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Pankaj Parkar Over a year ago

Since OP asked for applying over CSS over pseudo element, it won't possible inline. Otherwise ngStyle is way to go.

Yang Rui Over a year ago

@m98 thank you rapid response! in this case,the style selector is too complex ans not belong to a single element ,could you tell me how to write this in ngstyle. thanks!

Mohammad Kermani Over a year ago

@YangRui You're welcome, unfortunately you cannot have pseudoelements within inline styling

Yang Rui Over a year ago

@M98,no solution for this?

Mohammad Kermani Over a year ago

No, there might be some solution, but since you're going to use pseudo (like :before), the ngStyle does not support it. You want when the input checked, the slider:before use translateX to move. Why don't you try to do it using (let's say) Angular Animation?

|

Collectives™ on Stack Overflow

In angular , How to use component variable in style

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related