How Do I Implement Zingchart Into Angular2

I have an existing project that I want to implement zingcharts on. I have tried 3 different tutorials mainly from ' https://blog.zingchart.com/2016/07/19/zingchart-and-angular-2-ch

Solution 1:

With latest angular2 version (@2.2.3) you can leverage special ZingChart directive like this:

zing-chart.directive.ts

declare var zingchart: any;

@Directive({
  selector : 'zing-chart'
})
export classZingChartDirectiveimplementsAfterViewInit, OnDestroy {@Input()
  chart : ZingChartModel;

  @HostBinding('id')get something() { 
    returnthis.chart.id; 
  }

  constructor(private zone: NgZone) {}

  ngAfterViewInit() {
    this.zone.runOutsideAngular(() => {
      zingchart.render({
        id : this.chart.id,
        data : this.chart.data,
        width : this.chart.width,
        height: this.chart.height
      });
    });
  }

  ngOnDestroy() {
    zingchart.exec(this.chart.id, 'destroy');
  }
}

where ZingChartModel is just a model of your chart:

zing-chart.model.ts

exportclassZingChartModel { 
  id: String;
  data: Object;
  height: any;
  width: any;
  constructor(config: Object) {
    this.id = config['id'];
    this.data = config['data'];
    this.height = config['height'] || 300;
    this.width = config['width'] || 600;
  }
}

Here's completed Plunker Example