Property 'intlTelInput' does not exist on type 'Window'

Question

I am working with angular7. I need International Telephone Input (https://intl-tel-input.com/) for my website.

So i used the following comment to install the CDN.

npm uninstall ng2-tel-input --save

After that i called the CSS and JS files in the angular.json

"styles": [
     "node_modules/intl-tel-input/build/css/intlTelInput.min.css",
      "src/styles.css"
],
"scripts": [
    "node_modules/intl-tel-input/build/js/utils.js",
    "node_modules/intl-tel-input/build/js/intlTelInput.min.js"
],

Added the input field for the telephone number in "contactform.compenent.html"

<input type="tel" class="form-control" value="" placeholder="Mobile number"
       id="telnumber-field" required>

And Added the script for the telephone area in "app.compenent.ts"

ngOnInit(){

jQuery( document ).ready( function( $ ) {   

    if(jQuery('#telnumber-field').length){
        var input = document.querySelector("#telnumber-field");
        window.intlTelInput(input, {
            preferredCountries: ['in'],
            separateDialCode: true
        });
    }       

}); }

But there is an error comes.

ERROR in src/app/app.component.ts(65,11): error TS2339: Property 'intlTelInput' does not exist on type 'Window'.

Answer 1

At the time of typescript compilation intlTelInput object is not created on window object.change window type to any to skip property checking for window duration compilation. intlTelInput is visible once application is loaded in browser so application will work as expected.

  ngOnInit(){

   jQuery( document ).ready( function( $ ) {   

    if(jQuery('#telnumber-field').length){
        var input = document.querySelector("#telnumber-field");
       (<any>window).intlTelInput(input, {
            preferredCountries: ['in'],
            separateDialCode: true
        });
    }       

}); 
}