Import
import { AccountNumberPipeModule } from '@backbase/ui-ang/account-number-pipe'
Usage
Use the bbAccountNumber pipe to format account numbers. The pipe accepts a value and a configuration parameter that determines how the number should be segmented.
<!-- Basic IBAN formatting -->
<p>{{ 'IBAN1234567891234567' | bbAccountNumber : 'iban' }}</p>
With global configuration
The pipe can use globally configured format settings per account number type. Pass the account type as the configuration parameter.
<!-- Using predefined IBAN format -->
<p>{{ 'IBAN1234567891234567' | bbAccountNumber : 'iban' }}</p>
<!-- Using predefined BBAN format -->
<p>{{ 'BBAN1234567891234567' | bbAccountNumber : 'bban' }}</p>
<!-- Using predefined card number format -->
<p>{{ '4012888888881881' | bbAccountNumber : 'cardNumber' }}</p>
With custom configuration
The pipe can accept a custom configuration object to define specific segment patterns.
<!-- Custom segmentation pattern -->
<p>{{ '12345678' | bbAccountNumber : { segments: [2, 4, 2] } }}</p>
With card provider
For card numbers, specify the card provider name to apply provider-specific formatting.
<!-- Visa card number formatting -->
<p>{{ '4012888888881881' | bbAccountNumber : 'cardNumber' : 'visa' }}</p>
Parameters
|
Parameter |
Type |
Description |
|---|---|---|
|
cardProviderName |
string |
Card provider name (e.g., "visa", "mastercard") for card-specific formatting |
|
configuration (required) |
AccountNumberType | AccountsDisplayingFormat |
Type of the value ("iban", "bban", "cardNumber") or a custom format object |
|
value (required) |
string | number |
The account number to format |
cardProviderName
The cardProviderName parameter specifies the card provider for card-specific formatting. This parameter is only used when the configuration is set to "cardNumber".
<!-- Visa card formatting -->
<p>{{ '4012888888881881' | bbAccountNumber : 'cardNumber' : 'visa' }}</p>
<!-- Mastercard formatting -->
<p>{{ '5555555555554444' | bbAccountNumber : 'cardNumber' : 'mastercard' }}</p>
configuration
The configuration parameter determines how the account number is segmented. It accepts either a predefined type string or a custom format object.
When using a type string, valid values are "iban", "bban", or "cardNumber". The pipe will use the globally configured format for that type, or default to segments of 4 if no global configuration is provided.
<!-- Using predefined type -->
<p>{{ '1234567891234567' | bbAccountNumber : 'iban' }}</p>
When using a custom format object, specify the segment pattern using the segments property.
<!-- Custom segments as single number (all segments of size 4) -->
<p>{{ '12345678' | bbAccountNumber : { segments: 4 } }}</p>
<!-- Custom segments as array (segments of sizes 2, 4, and 2) -->
<p>{{ '12345678' | bbAccountNumber : { segments: [2, 4, 2] } }}</p>
Additionally you can configure custom separator to be used between segments.
<p>{{ '123456' | bbAccountNumber : { segments: [2, 2, 2], separator: '-' } }}</p>
value
The value parameter accepts the account number to be formatted. It can be provided as a string or number.
<!-- Account number as string -->
<p>{{ 'IBAN1234567891234567' | bbAccountNumber : 'iban' }}</p>
<!-- Account number as number -->
<p>{{ 1234567891234567 | bbAccountNumber : 'iban' }}</p>
Global configuration
The formatting behavior for each account number type can be globally configured using the ACCOUNTS_DISPLAYING_FORMAT injection token. This allows setting default segment patterns for IBAN, BBAN, and card numbers across the entire application.
If no global configuration is provided, the default segment size is 4.
import { ACCOUNTS_DISPLAYING_FORMAT } from '@backbase/ui-ang/account-number-pipe';
const accountsFormatConfig = {
iban: { segments: [4, 4, 4, 4, 4, 4] },
bban: { segments: [4, 4, 4, 4] },
cardNumber: {
segments: 4,
cardProviders: {
visa: { segments: [4, 4, 4, 4] },
mastercard: { segments: [4, 4, 4, 4] },
amex: { segments: [4, 6, 5] }
}
}
};
@NgModule({
providers: [
{ provide: ACCOUNTS_DISPLAYING_FORMAT, useValue: accountsFormatConfig }
]
})
export class AppModule {}