Search code examples
jqueryangularprogress-bartransclusion

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?

Solution

    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;