Add (No countries found) option

README.md

@@ -129,6 +129,7 @@ Or this:
 | selectedCountryISO       | `<CountryISO>`           | `None`                            | Set specific country on load.                                                                                 |
 | separateDialCode         | `boolean`                | `false`                           | Visually separate dialcode into the drop down element.                                                        |
 | countryChange            | `<Country>`              | `None`                            | Emits country value when the user selects a country from the dropdown.                                        |
+| noCountriesText		   | `string`                 | `'No Countries Found'`                | Custom string to be displayed when searching for not found country                                                                |
 
 ## Supported Formats
 

projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.html

@@ -6,7 +6,7 @@
     [isDisabled]="disabled"
   >
     <div class="iti__selected-flag dropdown-toggle" dropdownToggle>
-      <div class="iti__flag" [ngClass]="selectedCountry.flagClass || ''"></div>
+      <div class="iti__flag" [ngClass]="selectedCountry?.flagClass"></div>
       <div *ngIf="separateDialCode" class="selected-dial-code">+{{ selectedCountry.dialCode }}</div>
       <div class="iti__arrow"></div>
     </div>
@@ -40,13 +40,17 @@
           *ngFor="let country of allCountries"
           (click)="onCountrySelect(country, focusable)"
           [id]="country.htmlId"
+          [hidden]="noCountriesFound"
         >
           <div class="iti__flag-box">
             <div class="iti__flag" [ngClass]="country.flagClass"></div>
           </div>
           <span class="iti__country-name">{{ country.name }}</span>
           <span class="iti__dial-code">+{{ country.dialCode }}</span>
         </li>
+        <li class="iti__country" [hidden]="!noCountriesFound">
+          {{ noCountriesText }}
+        </li>
       </ul>
     </div>
   </div>

projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.ts

@@ -64,6 +64,9 @@ export class NgxIntlTelInputComponent implements OnInit, OnChanges {
   @Input() separateDialCode = false;
   separateDialCodeClass: string;
 
+  // take string input to be customized with project language
+  @Input() noCountriesText = 'No Countries Found';
+
   @Output() readonly countryChange = new EventEmitter<Country>();
 
   selectedCountry: Country = {
@@ -85,6 +88,10 @@ export class NgxIntlTelInputComponent implements OnInit, OnChanges {
   disabled = false;
   errors: Array<any> = ['Phone number is required.'];
   countrySearchText = '';
+  // flag if no countries found
+  noCountriesFound: boolean = false;
+  // flag to do the settimeout if the view not ended yet
+  comingFromFalseFlag: boolean = false;
 
   @ViewChild('countryList') countryList: ElementRef;
 
@@ -191,14 +198,31 @@ export class NgxIntlTelInputComponent implements OnInit, OnChanges {
     });
 
     if (country.length > 0) {
+      this.noCountriesFound = false;
       const el = this.countryList.nativeElement.querySelector('#' + country[0].htmlId);
       if (el) {
-        el.scrollIntoView({
-          behavior: 'smooth',
-          block: 'nearest',
-          inline: 'nearest',
-        });
+        if (!this.comingFromFalseFlag) {
+          el.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest',
+            inline: 'nearest',
+          });
+        } else {
+          // added setTimeout to make scroll happen because the view is
+          // not done yet before setTimeout if this.noCountriesFound changed state from true to false
+          setTimeout(() => {
+            el.scrollIntoView({
+              behavior: 'smooth',
+              block: 'nearest',
+              inline: 'nearest',
+            });
+          }, 0);
+          this.comingFromFalseFlag = false;
+        }
       }
+    } else {
+      this.noCountriesFound = true;
+      this.comingFromFalseFlag = true;
     }
 
     this.checkSeparateDialCodeStyle();

src/app/app.component.html

@@ -26,6 +26,7 @@ <h1>Test International Telephone Input Form</h1>
         [numberFormat]="PhoneNumberFormat.National"
         name="phone"
         formControlName="phone"
+        [noCountriesText]="noFoundCountries"
       >
       </ngx-intl-tel-input>
     </div>

src/app/app.component.ts

@@ -19,6 +19,7 @@ export class AppComponent {
   phoneForm = new FormGroup({
     phone: new FormControl(undefined, [Validators.required]),
   });
+  noFoundCountries: string = 'No Countries Found'
 
   changePreferredCountries() {
     this.preferredCountries = [CountryISO.India, CountryISO.Canada];