Property 'sumo' does not exist on type 'HTMLElement' for SumoSelect JQuery

Question

I am trying to implement a "clear" or "reset" functionality for my SumoSelect dropdown I have implemented. I am using Angular 4. This is my code I call when I want to clear the dropdown:

 var num = $('option').length;
 for(var i=0; i<num; i++){
   $('#state')[0].sumo.unSelectItem(i);
 }

I installed SumoSelect in my node_modules as well as putting this in my typings.d.ts:

interface JQuery {
   SumoSelect(any):void;

}

In my .angular-cli.json I also included the appropriate js and css files. My SumoSelect dropdown works fine but I can't figure out how to get my application to recognize sumo on the third line of my first code segment. I have tried other interfaces for JQuery and HTMLElement and no luck.

Answer 1

Try importing sumo in the component.

import  * as sumo from 'SumoSelect'; 

and import * as $ from 'jquery';

or just do this

`declare var $ : any ;` //in the component