NGX MASK

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

[![CI](https://github.com/JsDaddy/ngx-mask/actions/workflows/quality-check.yml/badge.svg?branch=develop)](https://github.com/JsDaddy/ngx-mask/actions/workflows/main.yml) [![npm](https://img.shields.io/npm/v/ngx-mask.svg)](https://www.npmjs.com/package/ngx-mask) [![npm downloads](https://img.shields.io/npm/dt/ngx-mask.svg)](https://npmjs.org/ngx-mask) [![npm](https://img.shields.io/npm/dm/ngx-mask.svg)](https://www.npmjs.com/package/ngx-mask) [![GitHub contributors](https://img.shields.io/github/contributors/JSDaddy/ngx-mask.svg?style=flat)](https://github.com/JSDaddy/ngx-mask) [![GitHub stars](https://img.shields.io/github/stars/JSDaddy/ngx-mask.svg?label=GitHub%20Stars&style=flat)](https://github.com/JSDaddy/ngx-mask) You can also try our NGX LOADER INDICATOR [check](https://www.npmjs.com/package/ngx-loader-indicator). You can also try our NGX COPYPASTE [check](https://www.npmjs.com/package/ngx-copypaste). ### You can try live [documentation](https://jsdaddy.github.io/ngx-mask/) with examples ## Installing Angular version 17.x.x ```bash $ npm install --save ngx-mask ``` Angular version 16.x.x ```bash $ npm install --save ngx-mask@16.4.2 ``` Angular version 15.x.x ```bash $ npm install --save ngx-mask@15.2.3 ``` Angular version 14.x.x ```bash $ npm install --save ngx-mask@14.3.3 ``` Angular version 13.x.x or 12.x.x ```bash $ 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 ```typescript bootstrapApplication(AppComponent, { providers: [ (...) provideEnvironmentNgxMask(), (...) ], }).catch((err) => console.error(err)); ``` ### Passing your own mask config options ```typescript import { IConfig } from 'ngx-mask' const maskConfig: Partial = { validation: false, }; bootstrapApplication(AppComponent, { providers: [ (...) provideEnvironmentNgxMask(maskConfig), (...) ], }).catch((err) => console.error(err)); ``` ### Using a function to configure: ```typescript const maskConfigFunction: () => Partial = () => { return { validation: false, }; }; bootstrapApplication(AppComponent, { providers: [ (...) provideEnvironmentNgxMask(maskConfigFunction), (...) ], }).catch((err) => console.error(err)); ``` ### With config options feature level ```typescript @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 ```typescript @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 ```typescript import { NgxMaskModule, IConfig } from 'ngx-mask' export const options: Partial | (() => Partial) = null; @NgModule({ imports: [ NgxMaskModule.forRoot(), ], }) ``` ### Passing in your own mask config options ```typescript import { NgxMaskModule, IConfig } from 'ngx-mask' const maskConfig: Partial = { validation: false, }; @NgModule({ imports: [ NgxMaskModule.forRoot(maskConfig), ], }) ``` Or using a function to get the config: ```typescript const maskConfigFunction: () => Partial = () => { return { validation: false, }; }; @NgModule({ imports: [ NgxMaskModule.forRoot(maskConfigFunction), ], }) ``` Then, just define masks in inputs. ## Usage Text [documentation](https://github.com/JsDaddy/ngx-mask/blob/develop/USAGE.md) ## Setup hooks ```bash $ npm run init:hooks ``` ## Contributing We would love some contributions! Check out this [document](https://github.com/JsDaddy/ngx-mask/blob/develop/CONTRIBUTING.md) to get started.

	Stars	Issues	Version	Updated	Created
imask	4,778	32	7.6.0	a month ago	7 years ago
mask-text	1	4	1.0.3	5 years ago	5 years ago
ngx-mask			17.0.8	7 days ago	7 years ago
react-mask			1.0.0	9 years ago	9 years ago
react-number-format	3,781	211	5.3.4	2 months ago	8 years ago
react-text-mask	8,255	332	5.5.0	2 years ago	8 years ago

imask vs mask-text vs ngx-mask vs react-mask vs react-number-format vs react-text-mask

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past