perf: use template string

.prettierrc

@@ -3,5 +3,13 @@
   "singleQuote": true,
   "trailingComma": "all",
   "semi": false,
-  "arrowParens": "always"
+  "arrowParens": "always",
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "parser": "angular"
+      }
+    }
+  ]
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-mat-input-tel",
-  "version": "18.2.0",
+  "version": "18.3.1",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -25,7 +25,7 @@
     "@angular/platform-browser-dynamic": "^18.2.5",
     "@angular/router": "^18.2.5",
     "core-js": "^3.38.1",
-    "libphonenumber-js": "^1.11.8",
+    "libphonenumber-js": "^1.11.9",
     "rxjs": "~7.8.1",
     "tslib": "^2.7.0",
     "zone.js": "~0.14.10"

projects/ngx-mat-input-tel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-mat-input-tel",
-  "version": "18.2.0",
+  "version": "18.3.1",
   "author": {
     "name": "Raphaël Balet",
     "email": "[email protected]"
@@ -14,7 +14,7 @@
     "@angular/forms": ">=15.x",
     "@angular/platform-browser": ">=15.x",
     "@angular/platform-browser-dynamic": ">=15.x",
-    "libphonenumber-js": "^1.11.8"
+    "libphonenumber-js": "^1.11.9"
   },
   "repository": {
     "type": "git",

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

@@ -8,19 +8,20 @@
     (menuOpened)="menuSearchInput?.nativeElement?.focus()"
   >
     <span class="country-selector-flag flag" [ngClass]="selectedCountry.flagClass"></span>
-    <span class="country-selector-code" *ngIf="selectedCountry?.dialCode"
-      >+{{ selectedCountry.dialCode }}</span
-    >
+
+    @if(selectedCountry.dialCode) {
+    <span class="country-selector-code">+{{ selectedCountry.dialCode }}</span>
+    }
   </button>
 
   <mat-menu
     #menu="matMenu"
     class="ngx-mat-input-tel-overlay-pane"
     [backdropClass]="'ngx-mat-input-tel-overlay-backdrop'"
   >
+    @if(enableSearch) {
     <input
       #menuSearchInput
-      *ngIf="enableSearch"
       class="country-search"
       [(ngModel)]="searchCriteria"
       type="text"
@@ -41,50 +42,58 @@
         margin: 2px;
       "
     />
+
+    } @for(country of preferredCountriesInDropDown; track $index ) {
     <button
       type="button"
       mat-menu-item
       class="country-list-button"
-      *ngFor="let country of preferredCountriesInDropDown"
       (click)="onCountrySelect(country, focusable)"
     >
       <div class="icon-wrapper">
         <div class="flag" [ngClass]="country.flagClass"></div>
       </div>
       <div class="label-wrapper">
         {{ country.name }}
-        <span [style]="!searchCriteria ? 'white-space: nowrap' : ''" *ngIf="country?.dialCode"
+
+        @if (country?.dialCode) {
+        <span [style]="!searchCriteria ? 'white-space: nowrap' : ''"
           >+{{ country.dialCode }}
-          <ng-container *ngIf="country.areaCodes">
-            {{ country.areaCodes.join(', ') }}
-          </ng-container>
+
+          @if(country.areaCodes) {
+          {{ country.areaCodes.join(', ') }}
+          }
         </span>
+        }
       </div>
     </button>
+    } @if(preferredCountriesInDropDown.length) {
+    <mat-divider></mat-divider>
+    } @for(country of allCountries | search : searchCriteria; track $index ) {
+    <button
+      type="button"
+      mat-menu-item
+      class="country-list-button"
+      (click)="onCountrySelect(country, focusable)"
+    >
+      <div class="icon-wrapper">
+        <div class="flag" [ngClass]="country.flagClass"></div>
+      </div>
+      <div class="label-wrapper">
+        {{ country.name }}
 
-    <mat-divider *ngIf="preferredCountriesInDropDown?.length"></mat-divider>
+        @if(country?.dialCode) {
+        <span [style]="!searchCriteria ? 'white-space: nowrap' : ''"
+          >+{{ country.dialCode }}
 
-    <ng-container *ngFor="let country of allCountries | search : searchCriteria">
-      <button
-        type="button"
-        mat-menu-item
-        class="country-list-button"
-        (click)="onCountrySelect(country, focusable)"
-      >
-        <div class="icon-wrapper">
-          <div class="flag" [ngClass]="country.flagClass"></div>
-        </div>
-        <div class="label-wrapper">
-          {{ country.name }}
-          <span [style]="!searchCriteria ? 'white-space: nowrap' : ''" *ngIf="country?.dialCode"
-            >+{{ country.dialCode }}
-            <ng-container *ngIf="country.areaCodes">
-              {{ country.areaCodes.join(', ') }}
-            </ng-container>
-          </span>
-        </div>
-      </button>
-    </ng-container>
+          @if(country.areaCodes) {
+          {{ country.areaCodes.join(', ') }}
+          }
+        </span>
+        }
+      </div>
+    </button>
+    }
   </mat-menu>
 
   <input

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

@@ -1,6 +1,6 @@
 import { FocusMonitor } from '@angular/cdk/a11y'
 import { coerceBooleanProperty } from '@angular/cdk/coercion'
-import { NgClass, NgFor, NgIf } from '@angular/common'
+import { NgClass } from '@angular/common'
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -81,8 +81,6 @@ const _ngxMatInputTelMixinBase: typeof ngxMatInputTelBase = mixinErrorState(
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
-    NgIf,
-    NgFor,
     NgClass,
 
     // Forms