I want to hide the search field in intltelinput

Question

I am using angular material and also using intltelinput to get country mobile code so, intlteliput inside material form field is not working properly like i want to hide searchbar but its not working nor the dial code is showing if i select the country flag. also material CSS is conflicting the intltelinput CSS.enter image description here

 <div class="col-md-4">          
              <mat-form-field class="example-full-width" appearance="fill" class="full-width-input">
                <mat-label style="margin-left: 50px;">Mobile Number</mat-label>
                <input
                  type="tel"
                  id="phone"
                  matInput  
                  class="client-tel"
                  formControlName="phone"
                  required
                />
              </mat-form-field>
            </div>

 setTimeout(() => {
    const inputEle = document.querySelector("#phone");
    if (inputEle) {
      const iti = intlTelInput(inputEle, {
        initialCountry: 'in',
        separateDialCode: false,
        utilsScript: "https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js",
      });
       
      this.addCustForm.patchValue({countryselectedtype:iti.getSelectedCountryData().iso2});

      inputEle.addEventListener('countrychange', () => {
        const selectedCountryData = iti.getSelectedCountryData().iso2;
        this.addCustForm.patchValue({countryselectedtype:selectedCountryData});
      });
    }
  }, 100)

Answer 1

Hi you can set the parameter countrySearch as false to remove the searchbar(countrySearch:false).

var iti = window.intlTelInput(input, {
      onlyCountries: ["us", "in", "ca"],
      preferredCountries: ["us"],
      countrySearch:false,
      formatOnDisplay: true,
      utilsScript: "https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js",
    });