Search code examples
javascriptjqueryangularmask

Property 'mask' does not exist on type 'JQuery<HTMLElement>

I recently was trying to use the jquery mask in my angular project, so i installed in my project with: npm i jquery-mask-plugin, so in my TS file i wrote:

ngOnInit() {
      $('.date').mask('11/11/1111');
      $('.time').mask('00:00:00');
      $('.date_time').mask('00/00/0000 00:00:00');
      $('.cep').mask('00000-000');
      $('.phone').mask('0000-0000');
      $('.phone_with_ddd').mask('(00) 0000-0000');
      $('.phone_us').mask('(000) 000-0000');
      $('.mixed').mask('AAA 000-S0S');
      $('.cpf').mask('000.000.000-00', {reverse: true});
      $('.money').mask('000.000.000.000.000,00', {reverse: true});
  }

Just as it is on the main site, but instead of $(document).ready(function(e)) i preferred to use the ngOnInit() , but when i save, the console hit me with the error:

"Property 'mask' does not exist on type 'Jquery'"

What am i doing wrong? I have to import on the appModule? I have to declare it in the angular.json? I have to import in the component file that i'm going to use? What should i do??
Obs: If there's any other mask for angular that you think it's better, please tell me :)

Solution

  • Well, the 'official' mask library for Angular 2+ is https://www.npmjs.com/package/ngx-mask. I have used it on several occasions and it works quite well. You should import it in appModule and if you have lazy loaded modules that are also using the mask in them as well.