I'm using plotly code in angular 2. I'm getting error for following code. I referred this code.
My code is:
var plotDiv = document.getElementById('myDiv');
plotDiv.on('plotly_relayout',
function(eventdata){
alert( 'ZOOM!' + '\n\n' +
'Event data:' + '\n' +
JSON.stringify(eventdata) + '\n\n' +
'x-axis start:' + new Date(eventdata['xaxis.range[0]'])+ '\n' +
'x-axis end:' + new Date(eventdata['xaxis.range[1]']));
var xVal = new Date(eventdata['xaxis.range[0]']);
var yVal = new Date(eventdata['xaxis.range[1]']);
}
);
I'm getting error for plotDiv.on('....') function. Is there any alternate function for .on() in angular 2? Please help me. I stuck here.
To prevent this error you can write:
var plotDiv: any = document.getElementById('myDiv');
plotDiv.on('plotly_relayout', ...
document.getElementById('myDiv') return HTMLElement. This type doesn't contain method on because this method is added within plotly-latest.min.js. So in order to silence the typescript warning you can explicity say compile not to check types for plotDiv
Another way is create type definition like:
interface PlotHTMLElement extends HTMLElement {
on(eventName: string, handler: Function): void;
}
var plotDiv = <PlotHTMLElement>document.getElementById('myDiv')
plotDiv.on('plotly_relayout', function() {
});
My preferred approach is to use string literal parameter types to declare a specialized return type for DOM selector functions. Then we define properties and events that are specific to the these elements.
This is possible thanks to TypeScript's open ended interfaces.
// Assuming you using modules as you mention Angular 2
// if this is actually script code and not a module, remove the `declare global` wrapper
declare global {
interface Document {
// This only enhances the return type of getElementById for the exact selector "myDiv".
getElementById("myDiv"): HTMLDivElement & {
// intersection `&` is used to add the specialized event.
on('plotly_relayout', (eventdata: {/* fill this in as needed */}) => void);
};
}
}
With this declaration, your original core will typecheck. There is no need to introduce type assertions and we are able to maintain a more declarative style. Furthermore, this serves as documentation of our expectations of the div myDiv, at the API level.
EDIT:
It appears you may be using jQuery, if so, the approach is the same and the code almost identical.
declare global {
interface JQueryStatic {
("#myDiv"): JQuery & {
on('plotly_relayout', (eventdata: {/* fill this in as needed */}) => void);
};
}
}