Angular 2+ module for IBAN (International bank account number) operations
npm:
npm install --save ng2-iban iban
Now you need to import Ng2IbanModule to your module
import { Ng2IbanModule } from 'ng2-iban';
@NgModule({
declarations: [],
imports: [Ng2IbanModule]
})
export class YourModule {
}
Ng2IbanModule provide two types of functionality. You can management with iban or provide bank information.
Iban is international bank account number which contains locale symbol, control sum or bank code. Locale characters are two first letters from iban. Next two are called as control sum. From 4 character to 8 we named bank code. For operations on that fields you can use:
- pipe,
- service,
- validator.
You can use pipe to convert iban
into electronic
format:
{{ 'SE3550000000054910000003' | ibanConverter }} // SE35 5000 0000 0549 1000 0003
{
locale: null,
separator: ' ',
formatWithLocale: true
}
To override options pass it to pipe:
{{ 'SE3550000000054910000003' | ibanConverter:options }} // 35-5000-0000-0549-1000-0003
You can inject pipe to angular 2+ component:
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
providers: [
Ng2IbanPipe
]
})
export class YourComponent {
private options = {
separator: '-'
};
constructor(private ng2IbanPipe: Ng2IbanPipe) {
ng2IbanPipe.transform('SE3550000000054910000003', this.options); // You can pass options as second parameter
}
}
Angular 2+ service provide methods that you can do with iban.
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html'
})
export class YourComponent {
constructor(private ng2IbanService: Ng2IbanService) {
ng2IbanService.onCheckIban('3550000000054910000003', 'SE');
}
}
Service API
Method | Response | Description |
---|---|---|
onCheckIban(iban: string, locale?: string) |
boolean | Validate iban |
onConvertToBban(iban: string, separator: string) |
string | Convert iban to bban or throw when iban is incorrect |
onConvertFromBban(locale: string, bban: string) |
string | Convert bban to iban |
onFormatIban(iban: string, separator: string) |
string | Format iban |
At the first you must inject module FormsModule
@NgModule({
//...
imports: [
//...
FormsModule
]
//...
})
export class YourModule { }
You can use directive for template driven
@Component({
template: `<input type="text" ng2IbanValidation [(ngModel)]="iban">`,
providers: [Ng2IbanDirective]
})
export class Component {
public iban: string;
}
If you want to validate without locale:
@Component({
template: `<input type="text" ng2IbanValidation ng2IbanLocale="SE" [(ngModel)]="iban">`,
providers: [Ng2IbanDirective]
})
export class Component {
public iban: string;
}
Reactive forms validation
const formGroup = formBuilder.group({
ibanWithLocale: new FormControl('SE3550000000054910000003', {
validators: [
Ng2IbanValidator.ValidatorIBAN
]
}),
ibanWithoutLocale: new FormControl('3550000000054910000003', {
validators: [
Ng2IbanValidator.ValidatorIBANWithLocale('SE')
]
})
});
This part of package focus on converting iban into list of information that you provide as json.
import { Ng2IbanModule } from 'ng2-iban';
@NgModule({
declarations: [],
imports: [Ng2IbanModule.forRoot({
bankInformationConfig: {
bankInformationPath: 'assets/my-bank-json.json', // Path to bank code list
bankInformationNotFound: 'Your bank code cannot be found' // Message returned when service cant find bank information
}
)
]
})
export class YourModule {
}
You need to create json file (default: assets/ng2-bank-information.json). Example:
[
{
"locale": "SE",
"codes": [
{
"code": "5000",
"information": {
"img": "https://...",
"title": "Your bank",
"description": "Any custom informations",
"customField": "You can add whatever you want"
}
}
]
}
]
Angular 2+ service for getting bank information.
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html'
})
export class YourComponent {
onGetLoadedBankInformationSubscription: Subscription;
constructor(private ng2BankInformationService: Ng2BankInformationService) {
this.onGetLoadedBankInformationSubscription = this.ng2BankInformationService
.onGetLoadedBankInformationSubject.subscribe(() => {
let bankInformation = this.ng2BankInformationService.onGetBankInformation('SE3550000000054910000003');
}
);
}
}
{{ 'SE3550000000054910000003' | bankInformation }} // return property title from json
If you want override options:
{{ 'SE3550000000054910000003' | bankInformation:{locale: null, property: 'title'}}