NGX MASK

NGX MASK is the best directive to solve masking input with needed pattern

You can also try our NGX LOADER INDICATOR check. You can also try our NGX COPYPASTE check.

You can try live documentation with examples

Installing

Angular version 17.x.x

$ npm install --save ngx-mask

Angular version 16.x.x

$ npm install --save ngx-mask@16.4.2

Angular version 15.x.x

$ npm install --save ngx-mask@15.2.3

Angular version 14.x.x

$ npm install --save ngx-mask@14.3.3

Angular version 13.x.x or 12.x.x

$ npm install --save ngx-mask@13.2.2

Quickstart if ngx-mask version >= 15.0.0

Import ngx-mask directive, pipe and provide NgxMask providers with provideNgxMask function.

With default config options application level

bootstrapApplication(AppComponent, {
    providers: [
        (...)
        provideEnvironmentNgxMask(),
        (...)
    ],
}).catch((err) => console.error(err));

Passing your own mask config options

import { NgxMaskConfig } from 'ngx-mask'

const maskConfig: Partial<NgxMaskConfig> = {
  validation: false,
};

bootstrapApplication(AppComponent, {
    providers: [
        (...)
        provideEnvironmentNgxMask(maskConfig),
        (...)
    ],
}).catch((err) => console.error(err));

Using a function to configure:

const maskConfigFunction: () => Partial<NgxMaskConfig> = () => {
  return {
    validation: false,
  };
};

bootstrapApplication(AppComponent, {
    providers: [
         (...)
         provideEnvironmentNgxMask(maskConfigFunction),
         (...)
],
}).catch((err) => console.error(err));

With config options feature level

@Component({
    selector: 'my-feature',
    templateUrl: './my-feature.component.html',
    styleUrls: ['./my-feature.component.css'],
    standalone: true,
    imports: [NgxMaskDirective, (...)],
    providers: [
          (...)
          provideNgxMask(),
          (...)
    ],
})
export class MyFeatureComponent {}

Then, import directive, pipe to needed standalone component and just define masks in inputs.

With Angular modules

@NgModule({
  imports: [
      NgxMaskDirective, NgxMaskPipe
  ],
  providers: [provideNgxMask()]
})

Quickstart if ngx-mask version < 15.0.0

For version ngx-mask < 15.0.0 Import ngx-mask module in Angular app.

With default mask config options

import { NgxMaskModule, NgxMaskConfig } from 'ngx-mask'

export const options: Partial<null | NgxMaskConfig> | (() => Partial<NgxMaskConfig>) = null;

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

Passing in your own mask config options

import { NgxMaskModule, NgxMaskConfig } from 'ngx-mask'

const maskConfig: Partial<NgxMaskConfig> = {
  validation: false,
};

@NgModule({
  imports: [
    NgxMaskModule.forRoot(maskConfig),
  ],
})

Or using a function to get the config:

const maskConfigFunction: () => Partial<NgxMaskConfig> = () => {
  return {
    validation: false,
  };
};

@NgModule({
  imports: [
    NgxMaskModule.forRoot(maskConfigFunction),
  ],
})

Then, just define masks in inputs.

Usage

Text documentation

Contributing

We would love some contributions! Check out this document to get started.

JsDaddy/ngx-mask