A powerful Angular directive for input masking with customizable patterns
Created with ❤️ by
NGX-MASK is a feature-rich input mask directive for Angular applications that provides:
| • Custom patterns & expressions • Multiple mask patterns (|) • Built-in common patterns • Prefix & suffix support | • Thousand separators • Decimal markers • Negative numbers • Leading zeros | • Real-time validation • Clear on non-match • Show/hide mask typing • Keep character positions |
| • Leading zero handling • AM/PM support • Custom separators • Multiple formats | • Custom placeholders • Special characters • Transform functions • Custom validation | • Reactive Forms • ControlValueAccessor • Built-in validation • Standalone support |
Check out our live documentation and examples
# For Angular 17 and above $ npm install ngx-mask # Using npm $ bun add ngx-mask # Using bun # For specific Angular versions: # Angular 16.x.x $ npm install ngx-mask@16.4.2 # Using npm $ bun add ngx-mask@16.4.2 # Using bun # Angular 15.x.x $ npm install ngx-mask@15.2.3 # Using npm $ bun add ngx-mask@15.2.3 # Using bun # Angular 14.x.x $ npm install ngx-mask@14.3.3 # Using npm $ bun add ngx-mask@14.3.3 # Using bun # Angular 13.x.x or 12.x.x $ npm install ngx-mask@13.2.2 # Using npm $ bun add ngx-mask@13.2.2 # Using bunPackage Manager Note: You can use either npm or bun based on your preference. Both package managers will work equally well with ngx-mask.
NGX-MASK follows Angular's official support policy, supporting Active and LTS versions. Currently supported:
- Angular 17 and newer (latest features and updates)
- For older Angular versions, use the corresponding NGX-MASK version as specified above
Note: Versions for Angular older than v17 will not receive new features or updates.
bootstrapApplication(AppComponent, { providers: [provideEnvironmentNgxMask()] }).catch((err) => console.error(err) );import { NgxMaskConfig } from 'ngx-mask'; const maskConfig: Partial<NgxMaskConfig> = { validation: false }; bootstrapApplication(AppComponent, { providers: [provideEnvironmentNgxMask(maskConfig)] }).catch( (err) => console.error(err) );@Component({ selector: 'my-feature', standalone: true, imports: [NgxMaskDirective], providers: [provideNgxMask()], }) export class MyFeatureComponent {}import { NgxMaskModule } from 'ngx-mask'; @NgModule({ imports: [NgxMaskModule.forRoot()] }) export class AppModule {}import { NgxMaskModule, NgxMaskConfig } from 'ngx-mask'; const maskConfig: Partial<NgxMaskConfig> = { validation: false }; @NgModule({ imports: [NgxMaskModule.forRoot(maskConfig)] }) export class AppModule {}import { NgxMaskModule } from 'ngx-mask'; @NgModule({ imports: [NgxMaskModule.forChild()] }) export class FeatureModule {}Check out other projects by JSDaddy:
We welcome contributions! Please read our contributing guidelines to learn about our development process and how you can propose bugfixes and improvements.
![@dependabot[bot]](https://avatars.githubusercontent.com/in/29110?s=64&v=4){kind=small}
