Bhetzie Bhetzie - 19 days ago 15
jQuery Question

Angular 2 Add values by css selectors and html attributes

I want to add the following progressbar into my angular 2 project, but I want to use transclusion so that I can pass data from my component that's using it into the value field. This is the progressbar that I want to use:

https://codepen.io/JMChristensen/pen/Ablch

What I'm struggling with is the references to css and html selectors. For instance, the progress bar uses:

var $circle = $('#svg #bar');
var r = $circle.attr('r');
var c = Math.PI*(r*2);
$circle.css({ strokeDashoffset: pct});
$('#cont').attr('data-pct',val);


How can I do this type of behavior in angular 2 without using JQUERY?

Answer
  1. Getting circle:

    var circle = document.getElementById("bar");

  2. Getting r:

    var r = circle.r; var c = Math.PI*(r*2);

  3. Setting strokeDashoffset:

    circle.style.strokeDashoffset = pct;

  4. Setting data-pct:

    document.getElementById("cont")["data-pct"] = val;