diff --git a/.prettierrc b/.prettierrc
index b49476321..562e95cbf 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -3,5 +3,13 @@
   "singleQuote": true,
   "trailingComma": "all",
   "semi": false,
-  "arrowParens": "always"
+  "arrowParens": "always",
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "parser": "angular"
+      }
+    }
+  ]
 }
diff --git a/package-lock.json b/package-lock.json
index 7cb547821..df794b931 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "ngx-mat-input-tel",
-  "version": "18.2.0",
+  "version": "18.4.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ngx-mat-input-tel",
-      "version": "18.2.0",
+      "version": "18.4.0",
       "dependencies": {
         "@angular/animations": "^18.2.5",
         "@angular/cdk": "^18.2.5",
@@ -19,7 +19,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.11",
         "rxjs": "~7.8.1",
         "tslib": "^2.7.0",
         "zone.js": "~0.14.10"
@@ -57,6 +57,7 @@
         "karma-jasmine": "~5.1.0",
         "karma-jasmine-html-reporter": "^2.1.0",
         "ng-packagr": "^18.2.1",
+        "prettier": "^3.3.3",
         "protractor": "~7.0.0",
         "semantic-release": "^24.1.1",
         "ts-node": "^10.9.2",
@@ -17333,9 +17334,9 @@
       }
     },
     "node_modules/libphonenumber-js": {
-      "version": "1.11.8",
-      "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.11.8.tgz",
-      "integrity": "sha512-0fv/YKpJBAgXKy0kaS3fnqoUVN8901vUYAKIGD/MWZaDfhJt1nZjPL3ZzdZBt/G8G8Hw2J1xOIrXWdNHFHPAvg==",
+      "version": "1.11.11",
+      "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.11.11.tgz",
+      "integrity": "sha512-mF3KaORjJQR6JBNcOkluDcJKhtoQT4VTLRMrX1v/wlBayL4M8ybwEDeryyPcrSEJmD0rVwHUbBarpZwN5NfPFQ==",
       "license": "MIT"
     },
     "node_modules/license-webpack-plugin": {
@@ -25215,6 +25216,22 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
+      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/pretty-ms": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/pretty-ms/-/pretty-ms-9.1.0.tgz",
diff --git a/package.json b/package.json
index 92647e69a..fcdf516c2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-mat-input-tel",
-  "version": "18.2.0",
+  "version": "18.4.0",
   "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.11",
     "rxjs": "~7.8.1",
     "tslib": "^2.7.0",
     "zone.js": "~0.14.10"
@@ -63,6 +63,7 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
     "ng-packagr": "^18.2.1",
+    "prettier": "^3.3.3",
     "protractor": "~7.0.0",
     "semantic-release": "^24.1.1",
     "ts-node": "^10.9.2",
diff --git a/projects/ngx-mat-input-tel/package.json b/projects/ngx-mat-input-tel/package.json
index 48f07a2b3..3c152a73e 100644
--- a/projects/ngx-mat-input-tel/package.json
+++ b/projects/ngx-mat-input-tel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-mat-input-tel",
-  "version": "18.2.0",
+  "version": "18.4.0",
   "author": {
     "name": "Raphaël Balet",
     "email": "raphael.balet@outlook.com"
@@ -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.11"
   },
   "repository": {
     "type": "git",
diff --git a/projects/ngx-mat-input-tel/src/lib/ngx-mat-input-tel.component.html b/projects/ngx-mat-input-tel/src/lib/ngx-mat-input-tel.component.html
index be1b38102..cbc776f62 100644
--- a/projects/ngx-mat-input-tel/src/lib/ngx-mat-input-tel.component.html
+++ b/projects/ngx-mat-input-tel/src/lib/ngx-mat-input-tel.component.html
@@ -8,9 +8,10 @@
     (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
@@ -18,53 +19,59 @@
     class="ngx-mat-input-tel-overlay-pane"
     [backdropClass]="'ngx-mat-input-tel-overlay-backdrop'"
   >
-    <input
-      #menuSearchInput
-      *ngIf="enableSearch"
-      class="country-search"
-      [(ngModel)]="searchCriteria"
-      type="text"
-      [placeholder]="searchPlaceholder"
-      (click)="$event.stopPropagation()"
-      style="
-        width: calc(100% - 4px);
-        height: 34px;
-        border-top: none;
-        border-right: none;
-        border-left: none;
-        border-image: initial;
-        border-bottom: 1px solid rgb(221, 221, 221);
-        font-size: 14px;
-        padding: 20px 10px 24px;
-        box-sizing: border-box;
-        background: transparent;
-        margin: 2px;
-      "
-    />
-    <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"
-          >+{{ country.dialCode }}
-          <ng-container *ngIf="country.areaCodes">
-            {{ country.areaCodes.join(', ') }}
-          </ng-container>
-        </span>
-      </div>
-    </button>
+    @if (enableSearch) {
+      <input
+        #menuSearchInput
+        class="country-search"
+        [(ngModel)]="searchCriteria"
+        type="text"
+        [placeholder]="searchPlaceholder"
+        (click)="$event.stopPropagation()"
+        style="
+          width: calc(100% - 4px);
+          height: 34px;
+          border-top: none;
+          border-right: none;
+          border-left: none;
+          border-image: initial;
+          border-bottom: 1px solid rgb(221, 221, 221);
+          font-size: 14px;
+          padding: 20px 10px 24px;
+          box-sizing: border-box;
+          background: transparent;
+          margin: 2px;
+        "
+      />
+    }
+    @for (country of preferredCountriesInDropDown; 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">
+              @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
@@ -76,15 +83,19 @@
         </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>
+
+          @if (country?.dialCode) {
+            <span [style]="!searchCriteria ? 'white-space: nowrap' : ''"
+              >+{{ country.dialCode }}
+
+              @if (country.areaCodes) {
+                {{ country.areaCodes.join(', ') }}
+              }
+            </span>
+          }
         </div>
       </button>
-    </ng-container>
+    }
   </mat-menu>
 
   <input
diff --git a/projects/ngx-mat-input-tel/src/lib/ngx-mat-input-tel.component.ts b/projects/ngx-mat-input-tel/src/lib/ngx-mat-input-tel.component.ts
index 26301aa12..0bb32e464 100644
--- a/projects/ngx-mat-input-tel/src/lib/ngx-mat-input-tel.component.ts
+++ b/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
@@ -195,7 +193,7 @@ export class NgxMatInputTelComponent
   ) {
     super(_defaultErrorStateMatcher, _parentForm, _parentFormGroup, _ngControl)
 
-    _focusMonitor.monitor(_elementRef, true).subscribe((origin) => {
+    _focusMonitor.monitor(_elementRef, true).subscribe((origin: any) => {
       if (this.focused && !origin) {
         this.onTouched()
       }
@@ -406,6 +404,7 @@ export class NgxMatInputTelComponent
     // }
 
     // Value is set from outside using setValue()
+    this.onPhoneNumberChange()
     this._changeDetectorRef.markForCheck()
   }