Getting started

@telixon/angular has two parts. TelixonPhoneInput is a directive for an <input>. The user sees a formatted number while the form control holds it in E.164. TelixonRegionPicker is a component that adds the flag and a searchable list of regions next to the input. Both are built on @telixon/web-sdk.

Each Angular major gets its own line of the package, starting with 20 for Angular 20. The package renders on the server and hydrates. Its end-to-end suite runs on Chromium, Firefox, and WebKit against a prerendered page.

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. Nothing else is needed before the first field.

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 as a whole application on StackBlitz, on its own or 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 } }

• Build a phone field explains the form contract and the error messages.
• Add a region picker covers the picker and its styles.
• Use it with Angular Material puts the same field inside mat-form-field.