Display existing number

Overview

When you want to display a user's number back to them, set the initialValue input to the full international number. The component will automatically select the relevant flag and reformat the number.

Note: reformatting the number this way requires the utils script to be loaded via the loadUtils option. The utils script is a custom build of Google's libphonenumber library, which we use for all formatting, validation, and placeholder generation.

Note: the toast shown when input is rejected isn't part of the library — see the strictReject event docs for an example of how to wire one up yourself.

JavaScript

import { Component } from "@angular/core";
import IntlTelInput from "@intl-tel-input/angular";
import "intl-tel-input/styles";

@Component({
  selector: "#app",
  template: `
    <label for="phone">Phone number</label>
    <intl-tel-input
      initialValue="+447733312345"
      [inputAttributes]="{ id: 'phone' }"
      [loadUtils]="loadUtils"
    />
  `,
  standalone: true,
  imports: [IntlTelInput],
})
export class AppComponent {
  loadUtils = () => import("intl-tel-input/utils");
}