Angular International Telephone Input & Contact Autocomplete (ng-tel-input-autocomplete)

Accessible international telephone input and contact autocomplete for Angular 21. Supports Reactive Forms, template-driven forms, country filtering, validation, formatting, keyboard navigation, asynchronous suggestions, RTL layouts, and optional paginated country APIs.

Installation

npm install ng-tel-input-autocomplete @angular/cdk

Angular, Angular Forms, CDK, and RxJS are peer dependencies. Optionally install google-libphonenumber and intl-tel-input for enhanced phone metadata, formatting, and validation.

Quick start

import { Component } from '@angular/core';
import { ReactiveFormsModule, FormControl } from '@angular/forms';
import { NgTelInputAutocomplete, PhoneInputValue } from 'ng-tel-input-autocomplete';

@Component({
  selector: 'app-phone-field',
  imports: [ReactiveFormsModule, NgTelInputAutocomplete],
  template: `
    <label for="customer-phone">Phone</label>
    <ng-tel-input-autocomplete inputId="customer-phone" [formControl]="phone" defaultCountry="US" />
  `,
})
export class PhoneField {
  readonly phone = new FormControl<PhoneInputValue>(null);
}

Application-wide defaults

import { provideNgTelInputAutocomplete } from 'ng-tel-input-autocomplete';

export const appConfig = {
  providers: [
    provideNgTelInputAutocomplete({
      defaultCountry: 'IN',
      flagMode: 'emoji',
      validationEnabled: true,
      preferredCountries: ['IN', 'US'],
    }),
  ],
};

Contact autocomplete

<ng-tel-input-autocomplete
  [formControl]="phone"
  [suggestions]="suggestions"
  [suggestionsLoading]="loading"
  (suggestionSearch)="searchContacts($event)"
  (loadMoreSuggestions)="loadNextPage()"
/>

Documentation

Full API reference, inputs, outputs, templates, theme tokens, styling, CSP, accessibility, and more:

• 📖 GitBook Documentation
• 📋 API Reference on GitHub

Links

• Demo: Live Playground
• Repository: Subhrangsu90/tel-input-autocomplete
• npm: ng-tel-input-autocomplete

License

MIT