Click on this link
Here is the HTML code snippet:
<chart [options]="options"
(load)="saveGraphInstance($event.context)"></chart>
<div (click)="switchGraph()">switch</div>
<div (click)="showLoadingForce()">show loading</div>
This is the Typescript code:
class AppComponent {
constructor() {
this.options = {
title : { text : 'simple chart' },
series: [{
data: [29.9, 71.5, 106.4, 129],
}],
lang:{
loading: 'your text here',
},
};
}
options: Object;
graph: any;
switchGraph() {
this.options = {
title : { text : 'different chart' },
series: [{
data: [129.9, 171.5, 106.4, 129],
}],
lang:{
loading: 'your text here',
},
};
this.graph.showLoading() // This doesn't work
setTimeout(function() {
this.graph.showLoading() // This also doesn't work
}, 4000);
}
showLoadingForce() {
this.graph.showLoading() // User clicked work
}
saveGraphInstance(graph) {
this.graph = graph;
//this.graph.showLoading() // after loading work
}
}
It is observed from the code above that the 'show loading' function does not work if triggered in the same function where the options are changed, even with a timeout of more than 4 seconds.
However, the 'show loading' function works fine if triggered after the 'load' event or initiated by the user.
Here are some questions that arise:
If the 'switch' button is clicked followed by the 'show loading' button immediately, the loading text will appear. Subsequently, the timeout function will run into an error 'ERROR TypeError: Cannot read property 'showLoading' of undefined' after the 4-second delay. How is this possible when 'showLoadingForce' function is successful, implying that 'saveGraphInstance' must have executed?
When does the 'load' event execute and get resolved? The information is not found in the source code on GitHub.