ngx-mat-intl-tel-input not working in angular 14

Question

I have installed angular material and cdk for angular 14 version i want to user import { NgxMatIntlTelInputModule } from "ngx-mat-intl-tel-input"; when i import this library its geeting error. the error message '"ngx-mat-intl-tel-input"' has no exported member named 'NgxMatIntlTelInputModule'. Did you mean 'NgxMatIntlTelInputComponent'?

How to use ngx-mat-intl-tel-input for use phone number validation with the country code in angular 14 the demo url : https://stackblitz.com/edit/ngx-mat-intl-tel-inpu-demo

how to phone number blank or clear when we change country code in this ngx-mat-intl-tel-input as per below code

                            <ngx-mat-intl-tel-input 
                            [preferredCountries]="['in', 'us']"
                            [enablePlaceholder]="true"
                            [enableSearch]="true" 
                            formControlName="phone"
                            name="phone" #phone
                         >
                          </ngx-mat-intl-tel-input>                       
                        </mat-form-field>  
this.myForm = this.fb.group({
      name: 'User',
      phone: new FormControl('+93  234234243',[Validators.required])
    });

Answer 1

I believe that you are installing ngx-mat-intl-tel-input with version 5.0.0 which is the latest version that supports Angular 14.

It has been migrated to the standalone component. And the NgxMatIntlTelInputModule is no longer available.

Thus, you need to import the NgxMatIntlTelInputComponent in your component assuming that your component is a standalone component.

import { NgxMatIntlTelInputComponent } from 'ngx-mat-intl-tel-input';

@Component({
  ...,
  standalone: true,
  imports: [NgxMatIntlTelInputComponent]
})
export class YourComponent { } 

If your components are not standalone, you need to import the NgxMatIntlTelInputComponent in the declarations array in the root module of your Angular application.

import { NgxMatIntlTelInputComponent } from 'ngx-mat-intl-tel-input';

@NgModule({
  ...,
  declarations: [NgxMatIntlTelInputComponent]
})
export class AppModule { }

Answer 2

A bit aside, but for posterity, those looking for a raw implementation of IntlPhone it's a matter of

• add the CSS via the docs
• update your angular.json scripts to ref the lib's util.js
• @ViewChild to ref the desired input element
• afterViewInit
• grab the formatted number out of the IntlPhone instance.

e.g.

Ang.json

{ ...
  compilerOptions: {
    scripts: ["node_modules/intl-tel-input/build/js/utils.js"]
  }
...}

Component

export class FooComponent implements AfterViewInit {
  @ViewChild('phone', { static: true })
    phoneEl!: ElementRef<HTMLInputElement>;
  intlPhone: any;
  ...
  ngAfterViewInit() {
        this.intlPhone = intlTelInput(this.phoneEl.nativeElement, {
            utilsScript: 'node_modules/intl-tel-input/build/js/utils.js'
        });
  }

  onSubmit() {
    const data = ...;
    data.phone = this.intlPhone.getNumber();
    return data;
  }