TS2339:Propert 'on' does not exist on type 'HTMLElement'

Question

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.

Answer 1

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

Plunker Example

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() {

});