Angular2 schedule and events

Question

I am using zingchart in my angular2 application and have addressed this problem. My data for the chart has changed, I need to rewrite the chart, and I just don’t know how to do it? this is the plunkr that the zing team supplied my reerender button. I do not know how to redirect the chart. https://plnkr.co/edit/OjqvVPiyKBUJbKgcLi6A?p=preview

import {bootstrap} from 'angular2/platform/browser'; import {Component, NgZone, AfterView, OnDestroy} from 'angular2/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 AfterView, 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> <button type="button" class="btn btn-default" (click)="rerender()">re-render</button> `, }) export class App { charts : Chart[]; constructor() { this.name = 'Angular2' this.charts = [{ id : 'chart-1', data : { type : 'line', series : [{ values :[2,3,4,5,3,3,2] }], }, height : 400, width : 600 }] } rerender(){ alert("please help me don't know what to write here"); } } bootstrap(App, []) .catch(err => console.error(err)); 

Answer 1

I would @ViewChild chart component from the parent using the @ViewChild decorator:

 @Component({ selector: 'my-app', directives: [ZingChart] template: ` <zingchart *ngFor="#chartObj of charts" [chart]='chartObj'></zingchart> <button type="button" class="btn btn-default" (click)="rerender()">re-render</button> `, }) export class App { charts : Chart[]; @ViewChild(ZingChart) chart: ZingChart; (...) } 

This way you can call the method directly in the chart component. Take out one, for example:

 @Component({ (...) }) export class App { (...) rerender(){ this.chart.render(); } } 

See this plunkr: https://plnkr.co/edit/NggADnGRbw4TsYiIUsh3?p=preview