Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jsdaddy/ngx-mask
Angular Plugin to make masks on form fields and html elements.
https://github.com/jsdaddy/ngx-mask
angular character decimals decimals-enter dot-separator eparator input input-mask mask mask-options ng ngx ngx-mask percent pipe special-characters sufix symbol typescript web
Last synced: 2 days ago
JSON representation
Angular Plugin to make masks on form fields and html elements.
- Host: GitHub
- URL: https://github.com/jsdaddy/ngx-mask
- Owner: JsDaddy
- License: mit
- Created: 2016-09-23T20:44:28.000Z (over 8 years ago)
- Default Branch: develop
- Last Pushed: 2025-01-22T06:33:41.000Z (16 days ago)
- Last Synced: 2025-02-04T14:07:18.001Z (2 days ago)
- Topics: angular, character, decimals, decimals-enter, dot-separator, eparator, input, input-mask, mask, mask-options, ng, ngx, ngx-mask, percent, pipe, special-characters, sufix, symbol, typescript, web
- Language: TypeScript
- Homepage: https://jsdaddy.github.io/ngx-mask
- Size: 26.2 MB
- Stars: 1,179
- Watchers: 21
- Forks: 298
- Open Issues: 36
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
NGX MASK is the best directive to solve masking input with needed pattern
[](https://github.com/JsDaddy/ngx-mask/actions/workflows/main.yml)
[](https://www.npmjs.com/package/ngx-mask)
[](https://npmjs.org/ngx-mask)
[](https://www.npmjs.com/package/ngx-mask)
[](https://github.com/JSDaddy/ngx-mask)
[](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 [email protected]
```
Angular version 15.x.x
```bash
$ npm install --save [email protected]
```
Angular version 14.x.x
```bash
$ npm install --save [email protected]
```
Angular version 13.x.x or 12.x.x
```bash
$ 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
```typescript
bootstrapApplication(AppComponent, {
providers: [
(...)
provideEnvironmentNgxMask(),
(...)
],
}).catch((err) => console.error(err));
```
### Passing your own mask config options
```typescript
import { NgxMaskConfig } 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, NgxMaskConfig } from 'ngx-mask'
export const options: Partial | (() => Partial) = null;
@NgModule({
imports: [
NgxMaskModule.forRoot(),
],
})
```
### Passing in your own mask config options
```typescript
import { NgxMaskModule, NgxMaskConfig } 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.
## 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 official [Angular releases page](https://angular.dev/reference/releases#actively-supported-versions).
## Usage
Text [documentation](https://github.com/JsDaddy/ngx-mask/blob/develop/USAGE.md)
## Contributing
We would love some contributions! Check out this [document](https://github.com/JsDaddy/ngx-mask/blob/develop/CONTRIBUTING.md) to get started.
