How To Bind Angular 5 variables to LESS variable?

Question

I'm using this LESS radial bar on an Angular 5 app. Right now, it's on an HTML template for a component, and the number for "data-progress" is hard-coded to be 75. I can bind everything else on the page to my TypeScript using Angular binding braces, so the data is available. But how can I pass Angular data to a LESS variable?

I thought about generating the HTML on the fly and inserting into into a DIV via document.getElementById, but this only inserts the raw code onto the page. My goal is to use the HTML and LESS from this JS Fiddle, but able to change the hard-coded value of 75 via TypeScript.

http://jsfiddle.net/andydesrosiers/fwaLt99a/

<div class="radial-progress" data-progress="75">

Answer 1

You won't bind to a LESS variable, you're just binding to an HTML element attribute called data-progress:

<div class="radial-progress" [attr.data-progress]="progress">

And in your Component, update the public member variable called progress, which you might declare like:

progress: number = 0;

Then you can just use your fiddle code basically verbatim.

You may need