Angular 2 easy pie chart not working

Question

I am trying to convert my existing jquery easy-pie-chart to Angular 2. As I am finding it difficult to completely rewrite entire code, I am trying to modify in bits and pieces.

Now to convert existing code I have done this (earlier it was inner-html but event binding not working in Angular 2) .

<div class="col-md-2" style="text-align:center;" *ngFor="let piedata of piemasterData">
    <label (click)="getData(piedata[1])" > {{piedata[1]}} </label>

    <div class="chart" data-percent= piedata[7] >
        <span class="percent">
            {{piedata[7]}}
        </span>
    </div>
    <br/>

</div>

Then I am calling

$('.chart').easyPieChart({

})

Now the problem is the easy-pie-chart is not taking the value set in data-percent. Hence its only showing a dot.

.

For example here ABC should take 10.48 and gauge the same value. Further after inspect elementing I saw the data-percent="piedata[7]" . I tried many combinations {{piedata[7]}} but still the value is not reflecting. I am not sure how to fix this in Angular 2.

Answer 1

Since i'm in a good mood, here's a directive you can use to display pies :

import { Directive, Input, ElementRef, OnInit } from '@angular/core';
import * as EasyPieChart from '../vendors/easypiechart.min.js'

@Directive({
  selector: 'easy-pie-chart'
})
export class EasyPieChartDirective implements OnInit {

  private pie: any;
  private _percent: number;

  @Input()
  set percent(value) {
    this._percent = value;
    if (this.pie)
      this.pie.update(value);
  };
  get percent() { return this._percent };

  @Input()
  options: any;

  constructor(private element: ElementRef) {
  }

  ngOnInit() {
    this.pie = new EasyPieChart(this.element.nativeElement, this.options);
    this.pie.update(this.percent)
  }
}

You could use it like this:

<easy-pie-chart [options]="{/*Your options goes here*/}" [percent]="piedata[7]">{{piedata[7]}}</easy-pie-chart>

This will also live update the chart if piedata[7] changed.

You will have to add "allowJs": true in the compiler options of tsconfig.json to make it work