Graphic Tools - Angular2

Question

I am relatively new to web applications and therefore just starting to use Angular2 (NOT using angularJS) and Typescript. I am trying to use Zingchart to plot. I went through 5 minutes of quick start, as well as a tutorial on the Angular2 page, and got a decent idea of ​​how this works. I followed the instructions on the Zingchart page to create a chart on a web page using two tools ( https://blog.zingchart.com/2016/03/16/angular-2-example-zingchart/ ). However, it looks like I'm having problems. 1) I can not import AfterView from @ angular / core. Although the page says that I should use angular2 / core, I use @ angular / core as the source folder for importing modules. angular2 / core is not recognized. 2) When there are functions associated with the zingchart object (for example, zingchart.render (), zingchart.exec ()), an error occurs that says that zingchart cannot be found. I'm also not sure what is going on here.

import { Component, NgZone, AfterViewInit, OnDestroy } from '@angular/core'; class Chart { 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; } } @Component({ selector : 'zingchart', inputs : ['chart'], template : ` <div id='{{chart.id}}'></div> ` }) class ZingChart implements AfterViewInit, OnDestroy { chart : Chart; 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'); } } //Root Component @Component({ selector: 'my-app', directives: [ZingChart], template: ` <zingchart *ngFor="#chartObj of charts" [chart]='chartObj'></zingchart> `, }) export class App { charts : Chart[]; constructor() { this.charts = [{ id : 'chart-1', data : { type : 'line', series : [{ values :[2,3,4,5,3,3,2] }], }, height : 400, width : 600 }] } } 

Answer 1

Full disclosure, I am a member of the ZingChart team.

1) "I am not able to import AfterView from @angular/core. Although the page says that I must be using angular2/core I am using @angular/core as the source folder"

By not following the instructions in the message , you violated the syntax of Angular 2 when the message was written. The Angular 2 syntax for importing functions and their names has been changed from 2.0.0 beta 9 (the version for which it was written) and 2.0.0 RC0 (the minimum version that I suppose youre using). If you want to use the existing code as it is, you must use the import statements that we wrote and the version of Angular 2 that we used (2.0.0 beta 9).

In the process of writing an updated blog post for Angular 2.0.0 RC4, which will include the use of the new @angular characters you said, you are trying to import

2) For event bindings, there is a good explanation on another stackoverflow post here .