Convert number to degrees in ngStyle using Angular 8

Question

{{result.percentage}} gives me a number from 0 to 100.

If I get 25, I want it to convert to -45 degrees or if I get 0, I want it to convert to -90 degrees or if I get 75, then it gets converted to 45 degrees.

[ngStyle]="{'transform': 'rotate(' + result.percentage + 'deg)'}"

Current, this gives an output style="transform: rotate(25deg);" which I want to convert to style="transform: rotate(-45deg);"

How do I go about this?

FYI, I need to bind the data of this speedometer: https://jsfiddle.net/bcgzrdfL/

what happens if its not one of those preset values? – C.OG Nov 27 '19 at 00:47 — C.OG, Nov 27 '19 at 00:47
The math should be able to handle this – Damian C Nov 27 '19 at 00:49 — Damian C, Nov 27 '19 at 00:49

Damian C · Accepted Answer · 2019-11-27T01:21:50.723

1

Looks like you need a math whiz, not a framework expert, however I'm going to take a shot at an answer:

[ngStyle]="{'transform': 'rotate(' + ((result.percentage * 1.8) - 90) + 'deg)'}"

edited Nov 27 '19 at 01:21

answered Nov 27 '19 at 00:47

Damian C

2,111
2
15
17

Perfect!! I actually tried this but got stuck by missing a bracket. Thank you so much :) – Elaine Byene Nov 27 '19 at 00:59

score 1 · Answer 2 · answered Nov 27 '19 at 00:48

1

Something like this?

html

[ngStyle]="{'transform': 'rotate(' + convertedPercentage + 'deg)'"

component

get convertedPercentage() {
  return (this.result.percentage * 1.8) - 90;
}

answered Nov 27 '19 at 00:48

C. Trenholm

351
1
10

1

Thank you. I have use the solution given by @Damian C. – Elaine Byene Nov 27 '19 at 00:59

score 1 · Answer 3 · answered Nov 27 '19 at 01:26

from a performance perspective, you're better off calculating the value only when it needs to be calculated, rather than doing the math in template.

styles = {}

setStyles(percentage) {
   this.styles = {
     'transform': 'rotate(' + ((percentage * 1.8) - 90) + 'deg)'
   }
}

call that when you get / assign your result or change your percentage, then use in template like:

[ngStyle]="styles"

the way you have it now, the degrees get calculated on every change detection cycle instead of only when they need to. This is a bad practice that will lead to poor app performance if you keep doing it.

Convert number to degrees in ngStyle using Angular 8

3 Answers3

Linked