https://github.com/mmjmanders/ngx-iban
Angular (7+) directive for validating IBAN numbers
https://github.com/mmjmanders/ngx-iban
angular banking
Last synced: 6 months ago
JSON representation
Angular (7+) directive for validating IBAN numbers
- Host: GitHub
- URL: https://github.com/mmjmanders/ngx-iban
- Owner: mmjmanders
- License: mit
- Created: 2017-10-30T13:04:28.000Z (over 8 years ago)
- Default Branch: main
- Last Pushed: 2026-01-19T13:45:34.000Z (6 months ago)
- Last Synced: 2026-01-19T19:48:25.826Z (6 months ago)
- Topics: angular, banking
- Language: TypeScript
- Homepage: https://mmjmanders.github.io/ngx-iban
- Size: 5.27 MB
- Stars: 8
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ngx-iban
This Angular (7+) library consists of three parts:
1. a directive to use in forms;
2. a pipe to transform a string to the IBAN format (groups of four characters);
3. a validator to use in reactive forms.
An optional ISO 3166-1 alpha-2 country code can be passed as a parameter to both the directive and the validator.
When given, validation also checks if the entered IBAN is valid for that specific country.
You can see a live demo of the module [here](https://mmjmanders.github.io/ngx-iban/).
**Important note**: From version 17.3.0 onward this library exports [standalone components](https://angular.io/guide/standalone-components). This mitigates the need to import `NgxIbanModule`.
From version 21.0.0 the `NgxIbanModule` doesn't event exist anymore.
## Installation
Use your favorite package manager to install `ngx-iban` and `ibantools`.
## Compatibility table
| ngx-iban | Angular |
|----------|---------|
| 7.x | 7.x |
| 8.x | 8.x |
| 9.x | 9.x |
| 10.x | 10.x |
| 11.x | 11.x |
| 12.x | 12.x |
| 13.x | 13.x |
| 14.x | 14.x |
| 15.x | 15.x |
| 16.x | 16.x |
| 17.x | 17.x |
| 18.x | 18.x |
| 19.x | 19.x |
| 20.x | 20.x |
| 21.x | 21.x |
## Usage
### Directive
```ts
import { Component } from "@angular/core";
import { IbanDirective } from "ngx-iban";
@Component({
imports: [IbanDirective],
selector: "my-component",
template: `
`
})
export class MyComponent {}
```
### Pipe
```html
{{ 'GB82WEST12345698765432' | iban }}
```
becomes
```html
GB82 WEST 1234 5698 7654 32
```
Of course don't forget to import `IbanPipe` in your component.
### Validator
```ts
import { ibanValidator } from "ngx-iban";
new FormControl("", ibanValidator());
```