角2 cssセレクタとhtml属性で値を追加

Question

角度2のプロジェクトに次のプログレスバーを追加したいが、値フィールドに使用しているコンポーネントからデータを渡すことができるようにtransclusionを使用したい。

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

私は何に苦しんだことは、CSSとHTMLのセレクタへの参照です：これは私が使用したいプログレスバーです。たとえば、進捗バーには次のものが使用されています：

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

JQUERYを使用しないで、このタイプの動作を角度2で実行するにはどうすればよいですか？

Answer 1

1. circleを取得：

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

2. rを取得：

   strokeDashoffset設定

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

3. ：

   を

   circle.style.strokeDashoffset = pct;

4. data-pctの設定：

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