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.
