Phone input for Angular

@telixon/angular has three parts. TelixonPhoneInput is a directive for an <input>. The user sees a formatted number while the form control holds it in E.164. TelixonPhoneField is the same field for Signal Forms. TelixonRegionPicker is a component that adds the flag and a searchable list of regions next to the input. All three are built on @telixon/web-sdk, render on the server, and hydrate.

The major version follows Angular’s.

Install

Angular CLI

ng add @telixon/angular

ng add installs the package, adds the flags stylesheet to the application’s styles, and registers provideTelixon with the engine preload.

npm

npm install @telixon/angular

Then add the flags stylesheet to the application’s styles:

styles.css

@import '@telixon/angular/flags/flags.css';

And register the providers:

app.config.ts

import { type ApplicationConfig } from '@angular/core';
import { provideTelixon } from '@telixon/angular';

export const appConfig: ApplicationConfig = {
  providers: [provideTelixon({ preloadEngine: true })],
};

The flags come from a sprite sheet that the stylesheet loads. provideTelixon registers the package’s providers. With preloadEngine: true the engine starts loading right after the first render, before any field needs it. Without the preload, the first field on the page loads the engine when it appears.

pnpm

pnpm add @telixon/angular

Then add the flags stylesheet to the application’s styles:

styles.css

@import '@telixon/angular/flags/flags.css';

And register the providers:

app.config.ts

import { type ApplicationConfig } from '@angular/core';
import { provideTelixon } from '@telixon/angular';

export const appConfig: ApplicationConfig = {
  providers: [provideTelixon({ preloadEngine: true })],
};

The flags come from a sprite sheet that the stylesheet loads. provideTelixon registers the package’s providers. With preloadEngine: true the engine starts loading right after the first render, before any field needs it. Without the preload, the first field on the page loads the engine when it appears.

Yarn

yarn add @telixon/angular

Then add the flags stylesheet to the application’s styles:

styles.css

@import '@telixon/angular/flags/flags.css';

And register the providers:

app.config.ts

import { type ApplicationConfig } from '@angular/core';
import { provideTelixon } from '@telixon/angular';

export const appConfig: ApplicationConfig = {
  providers: [provideTelixon({ preloadEngine: true })],
};

The flags come from a sprite sheet that the stylesheet loads. provideTelixon registers the package’s providers. With preloadEngine: true the engine starts loading right after the first render, before any field needs it. Without the preload, the first field on the page loads the engine when it appears.

Bun

bun add @telixon/angular

Then add the flags stylesheet to the application’s styles:

styles.css

@import '@telixon/angular/flags/flags.css';

And register the providers:

app.config.ts

import { type ApplicationConfig } from '@angular/core';
import { provideTelixon } from '@telixon/angular';

export const appConfig: ApplicationConfig = {
  providers: [provideTelixon({ preloadEngine: true })],
};

The flags come from a sprite sheet that the stylesheet loads. provideTelixon registers the package’s providers. With preloadEngine: true the engine starts loading right after the first render, before any field needs it. Without the preload, the first field on the page loads the engine when it appears.

The package depends on @telixon/core and @telixon/web-sdk and re-exports both. One import covers every widget, function, and type.

A phone field

A phone field and a region picker, linked through [for]:

contact.ts

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { TelixonPhoneInput, TelixonRegionPicker } from '@telixon/angular';

@Component({
  selector: 'app-contact',
  imports: [ReactiveFormsModule, TelixonPhoneInput, TelixonRegionPicker],
  template: `
    <telixon-region-picker [for]="phone" [prioritize]="['US', 'CA', 'GB']" />

    <input
      type="tel"
      autocomplete="tel"
      #phone="telixonPhoneInput"
      [telixonPhoneInput]="{ mode: 'international', defaultRegion: 'US', display: { callingCodeInInput: false } }"
      [formControl]="control"
      [placeholder]="phone.state()?.placeholder ?? ''"
    />
  `,
})
export class Contact {
  readonly control = new FormControl<string | null>(null);
}

The same field runs on StackBlitz, on its own, inside Angular Material, on a Signal Form, or on a Signal Form inside Angular Material.

At first the picker shows the United States flag and the field shows the placeholder 201-555-0123. After typing 4155550132 the field shows 415-555-0132 while the control holds +14155550132. For a partial number the control holds null and reports the fault:

control.value; // null
control.errors; // { telixonPhone: { kind: 'TOO_SHORT', minLength: 10 } }

• Phone field on Angular reactive forms explains the form contract and the error messages.
• Country picker for an Angular phone input covers the picker and its styles.
• Phone field on Angular Signal Forms puts the same field on a Signal Form.
• Phone input for Angular Material puts the same field inside mat-form-field.