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!

Answer 1

You can use Angular ngStyle in this case:

[ngStyle]="{ width: width }"

Take a look at this demo