Ngx-mask: Mask Not Working

[denisbetsi]

Using the sample provided

Module:
import {NgxMaskModule} from 'ngx-mask';
imports: [
NgxMaskModule.forRoot()
];

Component:

Additional info:

• There are NO Error in console
• Augury Shows NgxMaskModule is loaded

End result:
Nothing happens on the input when I interact with it.

Package.json:
"dependencies": {
"@angular/animations": "^7.1.4",
"@angular/cdk": "^7.2.0",
"@angular/common": "^7.0.0",
"@angular/compiler": "^7.0.0",
"@angular/core": "^7.0.0",
"@angular/forms": "^7.0.0",
"@angular/http": "^7.0.0",
"@angular/material": "^7.2.0",
"@angular/platform-browser": "^7.0.0",
"@angular/platform-browser-dynamic": "^7.0.0",
"@angular/router": "^7.0.0",
"@angular/service-worker": "^7.0.0",
"@fortawesome/fontawesome-free-webfonts": "^1.0.9",
"@ng-bootstrap/ng-bootstrap": "^3.3.0",
"@ngx-translate/core": "^10.0.1",
"bootstrap": "^4.2.1",
"core-js": "^2.5.6",
"hammerjs": "^2.0.8",
"jquery": "^3.3.1",
"lodash": "^4.17.10",
"ngx-mask": "^7.3.1",
"rxjs": "^6.3.1",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.10.2",
"@angular/cli": "~7.0.2",
"@angular/compiler-cli": "^7.0.0",
"@angular/language-service": "^7.0.0",
"@biesbjerg/ngx-translate-extract": "^2.3.4",
"@ngx-rocket/scripts": "^3.0.0",
"@types/jasmine": "^2.8.7",
"@types/jasminewd2": "^2.0.2",
"@types/jquery": "^1.10.35",
"@types/lodash": "^4.14.108",
"@types/node": "^8.10.13",
"codelyzer": "^4.4.4",
"hads": "^1.7.0",
"htmlhint": "^0.10.0",
"https-proxy-agent": "^2.0.0",
"husky": "^0.14.3",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "^4.1.0",
"karma": "~3.0.0",
"karma-chrome-launcher": "^2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^2.0.2",
"karma-jasmine": "^1.1.2",
"karma-junit-reporter": "^1.2.0",
"prettier": "^1.14.0",
"pretty-quick": "^1.6.0",
"protractor": "~5.4.0",
"puppeteer": "^1.4.0",
"stylelint": "~9.6.0",
"stylelint-config-prettier": "^4.0.0",
"stylelint-config-recommended-scss": "~3.2.0",
"stylelint-config-standard": "~18.2.0",
"stylelint-scss": "~3.3.0",
"ts-node": "~7.0.1",
"tslint": "~5.11.0",
"tslint-config-prettier": "^1.14.0",
"typescript": "~3.1.3"
},

[Thegrep01]

@denisbetsi Could you provide a bit more details about your usage of mask, cause i did not find this prob

[denisbetsi]

I have attempted a simple phone number example from the docs. Simple input with digit mask, nothing special :(

[Thegrep01]

@denisbetsi It is interesting because i use your config and mask works correct

[newprogrammer1991]

I have this issue also , input is'nt interact in ng build --prod

[lfreneda]

@denisbetsi fixed?

[denisbetsi]

I haven't re-tested it, I had to switch to another mask component due to project time constraints :(

[GomesMarcos]

Hello! I solved this importing the ngx-mask in a inner module [--->NOT IN APP.MODULE.TS<---].

This issue helped me to understand better: https://stackoverflow.com/questions/50729114/ionic3-cant-bind-to-textmask-since-it-isnt-a-known-property-of-ion-input

[matheuscaldasrj]

As @GomesMarcos said I had to import in a inner module.

App Module -> ModuleA -> ModuleB -> MyComponent that uses ngx mask

I did not have success importing either in AppModule nor in ModuleA, but when I imported in ModuleB it worked.

[skymarktech]

As @GomesMarcos said I had to import in a inner module.

App Module -> ModuleA -> ModuleB -> MyComponent that uses ngx mask

I did not have success importing either in AppModule nor in ModuleA, but when I imported in ModuleB it worked.

This suggestion fixed it for me