ng2-iban v1.0.2

ng2-iban

Angular 2+ module for IBAN (International bank account number) operations

• Navigation
  • Installation
  • Usage
    • Iban operations
      • Pipe
        • Pipe default options
        • Pipe in components and services
      • Service
      • Validator
        • Template driven
        • Reactive forms
    • Bank account operations
      • Module options
      • Bank information file
      • Bank information service
      • Bank information pipe
  • License

Installation

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 {
}

Usage

Ng2IbanModule provide two types of functionality. You can management with iban or provide bank information.

Iban operations

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.

Pipe

You can use pipe to convert iban into electronic format:

{{ 'SE3550000000054910000003' | ibanConverter }} // SE35 5000 0000 0549 1000 0003

Pipe default options

{
  locale: null,
  separator: ' ',
  formatWithLocale: true 
}

To override options pass it to pipe:

{{ 'SE3550000000054910000003' | ibanConverter:options }} // 35-5000-0000-0549-1000-0003

Pipe in components and services

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
  }
}

Service

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

Validator

At the first you must inject module FormsModule

@NgModule({
  //...
  imports: [
    //...
    FormsModule
  ]
  //...
})
export class YourModule { }

Template driven

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

Reactive forms validation

const formGroup = formBuilder.group({
  ibanWithLocale: new FormControl('SE3550000000054910000003', {
    validators: [
      Ng2IbanValidator.ValidatorIBAN
    ]
  }),
  ibanWithoutLocale: new FormControl('3550000000054910000003', {
    validators: [
      Ng2IbanValidator.ValidatorIBANWithLocale('SE')
    ]
  })
});

Bank account operations

This part of package focus on converting iban into list of information that you provide as json.

Module options

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 {
}

Bank information file

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"
        }
      }
    ]
  }
]

Bank information service

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');
        }
      );
  }
}

Bank information pipe

{{ 'SE3550000000054910000003' | bankInformation }} // return property title from json

If you want override options:

{{ 'SE3550000000054910000003' | bankInformation:{locale: null, property: 'title'}}

License

The MIT License