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 [email protected]

Angular version 15.x.x

$ npm install --save [email protected]

Angular version 14.x.x

$ npm install --save [email protected]

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

$ npm install --save [email protected]

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.