Angular 2 directive for input text masking


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
8,028299Jun 12, 2021Jan 22, 2016Minified + gzip package size for @msafi/angular2-text-mask in KB


Angular 2 Input Mask

Getting started

First, install it.

npm i @msafi/angular2-text-mask --save

Then, require it and use it:

import 'es6-shim';
import 'es6-promise';
import 'zone.js/dist/zone';
import 'reflect-metadata';

import {bootstrap} from 'angular2/platform/browser'
import {Component} from 'angular2/core';
import MaskedInput from '@msafi/angular2-text-mask'

  selector: 'app',
  templateUrl: `
    <input [textMask]="{mask: '(111) 111 1111'}" [(ngModel)]="myModel" type="text"/>
  directives: [MaskedInput]
export class AppComponent {
  private myModel = ''




You can see a working example in this folder.

Plain JavaScript

For a plain JavaScript example, you can check out this Plunk.


As you can see in the example above, you are passing an object to the textMask directive.

For more information about the values that the textMask object accepts, see the documentation here.


Public domain - CC0 1.0 Universal

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.