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: 3 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 (about 8 years ago)
- Default Branch: develop
- Last Pushed: 2024-11-05T16:11:12.000Z (3 days ago)
- Last Synced: 2024-11-05T16:25:12.436Z (3 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: 20.8 MB
- Stars: 1,159
- Watchers: 21
- Forks: 300
- Open Issues: 35
-
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
- awesome-angular - ngx-mask - Angular Plugin to make masks on form fields and html elements. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-mask - Angular Plugin to make masks on form fields and html elements. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-mask - Angular Plugin to make masks on form fields and html elements. (Table of contents / Third Party Components)
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.
## 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.
