Angular component

An Angular component for the intl-tel-input JavaScript plugin. View the source code, see a live demo on the Angular component example page, or follow the README to run the full set of demos locally.

Contents

• Installation
• Props
• Plugin initialisation options
• Form integration
• Events
• Accessing instance methods
• Accessing static methods

Installation

First, install the package:

npm install intl-tel-input

Then, add something like this to your code:

import IntlTelInput from "intl-tel-input/angular";
import "intl-tel-input/styles";

@Component({
  imports: [IntlTelInput],
  template: `<intl-tel-input initialCountry="us" [loadUtils]="loadUtils" />`,
})
export class PhoneInputComponent {
  loadUtils = () => import("intl-tel-input/utils");
}

See Best practices for general advice on validation, E.164 storage, initial country, and localisation.

Props

Any of the plugin’s initialisation options (like initialCountry) can also be passed as an input.

Plugin initialisation options

All of the plugin’s initialisation options are supported as individual Angular component inputs using the same option name. For example:

<intl-tel-input initialCountry="us" />

Form integration (ngModel / formControl)

The component implements ControlValueAccessor, so you can bind to it with Angular Forms ([(ngModel)], formControl, or formControlName) for two-way reactive updates. Whenever the bound value changes, the input is updated via setNumber. See the form demo for an example using ReactiveFormsModule.

Events

const { source, rejectedInput, reason } = $event;
if (reason === "max-length") msg = "Maximum length reached for this country";
else if (source === "paste") msg = "Stripped invalid characters from pasted text";
else msg = `Character not allowed: "${rejectedInput}"`;

Native input events

The component exposes several commonly used native DOM events that you can bind to using Angular’s standard event binding syntax (eventName)="handlerMethod($event)". For other native events not listed below, you can access the input element directly (see Other native events section).

Supported events

The following native input events are directly supported:

• blur - Fired when the input loses focus (receives FocusEvent)
• focus - Fired when the input receives focus (receives FocusEvent)
• keydown - Fired when a key is pressed down (receives KeyboardEvent)
• keyup - Fired when a key is released (receives KeyboardEvent)
• paste - Fired when content is pasted (receives ClipboardEvent)
• click - Fired when the input is clicked (receives MouseEvent)

Example usage:

<intl-tel-input
  (blur)="handleBlur($event)"
  (focus)="handleFocus($event)"
  (keydown)="handleKeyDown($event)"
  (paste)="handlePaste($event)"
/>

Other native events

For any other native DOM events not listed above, you can access the input element directly using a ViewChild reference and add event listeners manually:

export class MyComponent implements AfterViewInit, OnDestroy {
  @ViewChild('telInput') telInput!: IntlTelInput;

  ngAfterViewInit() {
    const input = this.telInput.getInput();
    input?.addEventListener('mouseenter', this.handleMouseEnter);
  }

  ngOnDestroy() {
    const input = this.telInput.getInput();
    input?.removeEventListener('mouseenter', this.handleMouseEnter);
  }

  handleMouseEnter = (event: MouseEvent) => {
    console.log('Mouse entered input:', event);
  }
}

Accessing instance methods

You can access all of the plugin’s instance methods (setNumber, setCountry, setPlaceholderNumberType, etc.) by using a ViewChild reference into the IntlTelInput component (using the #ref prop), and then calling this.ref.getInstance(), e.g. this.ref.getInstance().setNumber(...);. See the Set Number demo for a full example. You can also access the input DOM element in a similar way: this.ref.getInput().

Accessing static methods

You can access all of the plugin’s static methods by importing intlTelInput from the same file as the Angular component, e.g. import { intlTelInput } from "intl-tel-input/angular" (note the lower case “i” in “intlTelInput”). You can then use this as you would with the main plugin, e.g. intlTelInput.getCountryData() or intlTelInput.utils.numberType etc.