Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 1,093 Commits
.github		.github
cypress		cypress
projects/ngx-mask-lib		projects/ngx-mask-lib
src		src
.gitignore		.gitignore
.gitmodules		.gitmodules
.lintstagedrc		.lintstagedrc
.markdownlint.json		.markdownlint.json
.prettierrc.json		.prettierrc.json
.puppeteerrc.cjs		.puppeteerrc.cjs
.releaserc.yaml		.releaserc.yaml
.stylelintignore		.stylelintignore
.stylelintrc.json		.stylelintrc.json
CHANGELOG.md		CHANGELOG.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
USAGE.md		USAGE.md
angular.json		angular.json
bun.lockb		bun.lockb
commitlint.config.js		commitlint.config.js
cypress.config.ts		cypress.config.ts
eslint.config.js		eslint.config.js
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.ts		tailwind.config.ts
tsconfig.app.json		tsconfig.app.json
tsconfig.eslint.json		tsconfig.eslint.json
tsconfig.json		tsconfig.json
tsconfig.spec.json		tsconfig.spec.json

Repository files navigation

NGX MASK

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

You can also try our NGX LOADER INDICATORcheck.You can also try our NGX COPYPASTEcheck.

You can try livedocumentation 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

Importngx-mask directive, pipe and provide NgxMask providers withprovideNgxMask 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'constmaskConfig:Partial<NgxMaskConfig>={validation:false,};bootstrapApplication(AppComponent,{providers:[(...)provideEnvironmentNgxMask(maskConfig),(...)],}).catch((err)=>console.error(err));

Using a function to configure:

constmaskConfigFunction:()=>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(),(...)],})exportclassMyFeatureComponent{}

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.0Importngx-mask module in Angular app.

With default mask config options

import{NgxMaskModule,NgxMaskConfig}from'ngx-mask'exportconstoptions:Partial<null|NgxMaskConfig>|(()=>Partial<NgxMaskConfig>)=null;@NgModule({imports:[NgxMaskModule.forRoot(),],})

Passing in your own mask config options

import{NgxMaskModule,NgxMaskConfig}from'ngx-mask'constmaskConfig:Partial<NgxMaskConfig>={validation:false,};@NgModule({imports:[NgxMaskModule.forRoot(maskConfig),],})

Or using a function to get the config:

constmaskConfigFunction:()=>Partial<NgxMaskConfig>=()=>{return{validation:false,};};@NgModule({imports:[NgxMaskModule.forRoot(maskConfigFunction),],})

Then, just define masks in inputs.

Actively supported versions

ngx-mask follows the official Angular support policy, supporting the Active and LTS (Long-Term Support) versions of Angular. As of the latest release, Angular v17 and newer are supported.

Projects using Angular versions outside the supported range (e.g., older than v17) should use the last compatible version of ngx-mask. However, these versions will no longer receive updates, bug fixes, or new features.

For detailed information about Angular's versioning and support schedule, visit the officialAngular releases page.