Angular IMask Plugin

angular-imask

Install

npm install angular-imask

Setup

import { IMaskModule } from 'angular-imask';

@NgModule({
  imports: [
    IMaskModule,
    ...
  ],
  ...
}) {...}

Usage

<!-- directive -->
<input
  [imask]="{mask: '+{7}(000)000-00-00'}"  <!--see more mask props in a guide-->
  [unmask]="true"  <!--true|false|'typed'-->
  (accept)="onAccept"  <!--depending on prop above first argument is
    `value` if `unmask=false`,
    `unmaskedValue` if `unmask=true`,
    `typedValue` if `unmask='typed'`-->
  (complete)="onComplete"
  <!-- OPTIONAL: provide custom element getter -->
  [imaskElement]="(elementRef, directiveRef) => maskElement" <!-- default = elementRef.nativeElement -->
/>

<!-- pipe -->
<p>{{ value | imask:mask }}</p>

More options see in a guide.

Development

As to make changes to this package follow the steps:

Build imask

  npm run make

Go to angular-imask directory

  cd packages/angular-imask

Launch dev command

  npm run dev

(Optional) Launch example app

  npm run example

Uh oh!