title: how to use interpolation with a data property of a template div in angular (angulary 7)?
body: <p>let's say i have this class property in my component</p>
  
  <pre><code>public percentVal: number;
  
  //within the class it got initialized
  
  this.percentVal = parseInt(blahblah);
  </code></pre>
  
  <p>now in my html template i have this "data-percent" property. I already tried</p>
  
  <pre><code>data-percent="{{percentVal}}"  OR data-percent={{percentVal}}
  </code></pre>
  
  <p>nothing worked</p>
  
  <pre><code>&lt;div class="chart blue" data-percent="{{percentVal}}"
             data-size="40"&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>Note: i even console logged the typeof this.percentVal within the component. I was actually passing a correct number type and value</p>
  
  <p>it's somehow like <strong><a href="https://stackoverflow.com/questions/43182830/angular-2-easy-pie-chart-not-working">this one</a></strong> but mine is using angular 7 and not angular 2</p>
  
  <p>I want to see <strong><a href="https://i.stack.imgur.com/Q60BI.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Q60BI.jpg" alt="like this"></a></strong></p>
  
  <p>but am currently seeing <strong><a href="https://i.stack.imgur.com/35cGQ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/35cGQ.jpg" alt="This issue"></a></strong></p>