Merge pull request #68 from Kichrum/feat/search-by-code

Enable searching by the dial code
tanansatpal · Sep 9, 2020 · 1b6c5bb · 1b6c5bb
2 parents cf47b08 + 75bc24d
commit 1b6c5bb
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/projects/ngx-mat-intl-tel-input/src/lib/ngx-mat-intl-tel-input.component.html b/projects/ngx-mat-intl-tel-input/src/lib/ngx-mat-intl-tel-input.component.html
@@ -13,7 +13,7 @@
     </button>
     <mat-divider *ngIf="preferredCountriesInDropDown?.length"></mat-divider>
     <ng-container *ngFor="let country of allCountries">
-      <button type="button" mat-menu-item class="country-list-button" *ngIf="country.name | search:searchCriteria" (click)="onCountrySelect(country, focusable)">
+      <button type="button" mat-menu-item class="country-list-button" *ngIf="country | search:searchCriteria" (click)="onCountrySelect(country, focusable)">
         <div class="icon-wrapper">
           <div class="flag" [ngClass]="country.flagClass"></div>
         </div>

diff --git a/projects/ngx-mat-intl-tel-input/src/lib/search.pipe.ts b/projects/ngx-mat-intl-tel-input/src/lib/search.pipe.ts
@@ -1,17 +1,23 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
+import { Country } from './model/country.model';
+
 @Pipe({
   name: 'search'
 })
 export class SearchPipe implements PipeTransform {
 
   // country | search:'searchCriteria'
-  transform(country: any, searchCriteria?: any): any {
+  transform(country: Country, searchCriteria?: string): boolean {
     if (!searchCriteria || searchCriteria === '') {
       return true;
     }
 
-    return country.toLowerCase().includes(searchCriteria.toLowerCase());
+    return `${country.name}+${country.dialCode}`
+      .toLowerCase()
+      .includes(
+        searchCriteria.toLowerCase()
+      );
   }
 
 }