Import
import { PhoneNumberModule } from '@backbase/ui-ang/phone-number-format-pipe'
Usage
Use the phoneNumber pipe to format phone numbers according to international standards. The pipe uses the libphonenumber-js library to parse and format phone numbers based on the provided country code.
<!-- Basic phone number formatting -->
<p>{{ '0612345622' | phoneNumber : 'NL' }}</p>
Parameters
|
Parameter |
Type |
Description |
|---|---|---|
|
countryCode |
CountryCode |
Two-letter ISO country code for formatting |
|
isInputElement |
boolean |
Whether the value is from an input element |
|
value (required) |
string | number |
The phone number to format |
countryCode
The countryCode parameter specifies the country for phone number formatting. It accepts two-letter ISO country codes (e.g., 'US', 'NL', 'GB').
If not provided, the pipe returns the value as-is without formatting.
<!-- Dutch phone number -->
<p>{{ '0612345622' | phoneNumber : 'NL' }}</p>
<!-- US phone number -->
<p>{{ '2025551234' | phoneNumber : 'US' }}</p>
<!-- UK phone number -->
<p>{{ '2071234567' | phoneNumber : 'GB' }}</p>
isInputElement
The isInputElement parameter indicates whether the phone number is being typed in an input element. When set to true, the pipe uses the AsYouType formatter for progressive formatting.
<!-- For display (not in input) -->
<p>{{ '0612345622' | phoneNumber : 'NL' : false }}</p>
<!-- For input element -->
<input [value]="phoneNumber | phoneNumber : 'NL' : true">
value
The value parameter accepts the phone number to be formatted. It can be a string or number.
<!-- Phone number as string -->
<p>{{ '0612345622' | phoneNumber : 'NL' }}</p>
<!-- Phone number as number -->
<p>{{ 612345622 | phoneNumber : 'NL' }}</p>
Global configuration
Input phone configuration token
The INPUT_PHONE_CONFIG_TOKEN enables global configuration for all phone number formatting instances. This token can override display format, mask, and validation settings.
import { INPUT_PHONE_CONFIG_TOKEN } from '@backbase/ui-ang/input-phone';
const inputPhoneConfig = {
maxLength: 10,
minLength: 5,
autocomplete: 'off',
displayFormat: 'E.164',
mask: '(000) 000-0000'
};
@NgModule({
providers: [
{ provide: INPUT_PHONE_CONFIG_TOKEN, useValue: inputPhoneConfig }
]
})
export class AppModule {}
Configurable properties:
- maxLength: Maximum phone number length
- minLength: Minimum phone number length
- autocomplete: Autocomplete attribute value
- mask: Custom mask pattern
- displayFormat: Format type (e.g., 'E.164', 'INTERNATIONAL', 'NATIONAL')
- validationPattern: Custom validation pattern
- hideSelectedCountryFlag: Hide country flag
- defaultCountryIsoCode: Default country code
- countryList: List of allowed countries
Country code format configuration token
The COUNTRY_CODE_FORMAT_CONFIG_TOKEN enables country-specific formatting configuration. Use this token when you need different masks and length constraints for different countries.
import { COUNTRY_CODE_FORMAT_CONFIG_TOKEN } from '@backbase/ui-ang/input-phone';
const countryCodeFormatConfig = {
'+1': {
mask: '+0 (000) 000-0000',
minLength: 8,
maxLength: 12
},
'+31': {
mask: '+00 00 0000 0000',
minLength: 9,
maxLength: 10
}
};
@NgModule({
providers: [
{ provide: COUNTRY_CODE_FORMAT_CONFIG_TOKEN, useValue: countryCodeFormatConfig }
]
})
export class AppModule {}