CODEWITHSUNDEEP
angulartypescript
Nils
Nils

Reputation: 469

How do i use ngStyle with Interpolation

So in my app, there are 2 slidebars which output a value between 1 and 100. based on the output, i want to set the margin of a div to whatever the output is in percentage. Ive tried many things and google didnt seem to have an answer to my exact problem

So in the .ts file i have a variable called "xpos" which stores the output of the slider. The following code is my attempt on solving my problem but it doesnt seem to work; 

<p [ngStyle]="{margin-left.%: {{xpos}}}">Test</p>

Upvotes: 0

Views: 581

Answers (2)

Alexander Staroselsky
Alexander Staroselsky

Reputation: 38757

If it's just a single property, in this case margin-left, you can also use [style]:

<p [style.margin-left.%]="xpos">Test</p>

Here is an example in action. That being said @NorbertBartko has a correct answer. It can also be written as:

<p [ngStyle]="{'margin-left.%': xpos}"> Test </p>

Hopefully that helps!

Upvotes: 1

Norbert Bartko
Norbert Bartko

Reputation: 2632

Try this out: 

<p [ngStyle]="{'margin-left': xpos+'%'}"> Test </p>

If your using the square brackets on an attribute you do not have to wrap your variables in curly braces.

Upvotes: 4

Related Questions