Text-mask: createNumberMask import

Created on 3 May 2017  Â·  4Comments  Â·  Source: text-mask/text-mask

Hi Guys

Firstly, thank you for a great project. I have successfully installed text-mask in ionic 2 and the text mask is working great. I am however struggling to get the createNumberMask to work. I am new to angular 2 and ionic 2 so I suspect I am doing something wrong. I have installed the addon (npm i text-mask-addons --save).

The questions I have are :

  • do i insert the import statement (import createNumberMask from 'text-mask-addons/dist/createNumberMask') into the root appmodule.ts ?

  • do I then copy the code in the example (i.e. the source code of createNumberMask) into my component?

  • Finally, how do I them finally call the code in the html? is is just ?

  • if answering this is to much of a mission, please direct me to a working angular 2 example with createNumberMask so that I can correct the source code.

Apologies for being a nuisance.

regards #

addons angular2 question

Most helpful comment

Hey mate, It's pretty easy to import that addon into an Angular project. What I did was import into my component this:
import createNumberMask from 'text-mask-addons/dist/createNumberMask';

then I create a variable calld numberMask like this into my component:
private numberMask = createNumberMask({ thousandsSeparatorSymbol: '.', allowDecimal: true, decimalSymbol: ',' })

finally into my component template:
<input [textMask]="{mask: numberMask}" [type]="type">

and that's it, it works sweet for me. Hope I had Helped you out ;)

All 4 comments

I don't use Angular so I may be no help, but I'll try.

createNumberMask returns a mask function. After importing the createNumberMask you need to run that function to initialize the numberMask

// this example is not specific to any framework
import createNumberMask from 'text-mask-addons/dist/createNumberMask'

var numberMask = createNumberMask(/* options */)
// now use `numberMask` for the mask property of the MaskedInput.

I don't know how to help more specifically with Angular, but if you have any other questions fire away

Thank you

I will check it out. If I get it working in Ionic2, I will update the thread.

Regards

From: Loz Jackson [mailto:[email protected]]
Sent: 04 May 2017 06:59 PM
To: text-mask/text-mask text-mask@noreply.github.com
Cc: GeometricProgress mark@gpifm.com; Author author@noreply.github.com
Subject: Re: [text-mask/text-mask] createNumberMask import (#522)

I don't use Angular so I may be no help, but I'll try.
createNumberMask returns a mask function. After importing the createNumberMask you need to run that function to initialize the numberMask
// this example is not specific to any framework
import createNumberMask from 'text-mask-addons/dist/createNumberMask'

var numberMask = createNumberMask(/* options */)
// now use numberMask for the mask property of the MaskedInput.
I don't know how to help more specifically with Angular, but if you have any other questions fire away
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub https://github.com/text-mask/text-mask/issues/522#issuecomment-299246198 , or mute the thread https://github.com/notifications/unsubscribe-auth/AbClz9vCroqpoqfA0ihQstduzgsaj1wRks5r2gO3gaJpZM4NPjxA . https://github.com/notifications/beacon/AbClz8j37CNkJc6n7E-c3MH3Ykn8SnaRks5r2gO3gaJpZM4NPjxA.gif

Hey mate, It's pretty easy to import that addon into an Angular project. What I did was import into my component this:
import createNumberMask from 'text-mask-addons/dist/createNumberMask';

then I create a variable calld numberMask like this into my component:
private numberMask = createNumberMask({ thousandsSeparatorSymbol: '.', allowDecimal: true, decimalSymbol: ',' })

finally into my component template:
<input [textMask]="{mask: numberMask}" [type]="type">

and that's it, it works sweet for me. Hope I had Helped you out ;)

Thanks Cristian

You are a machine! Much appreciated – thank you.

Regards

Mark

From: Cristian Danilo Gutiérrez [mailto:[email protected]]
Sent: 10 May 2017 07:37 PM
To: text-mask/text-mask text-mask@noreply.github.com
Cc: GeometricProgress mark@gpifm.com; Author author@noreply.github.com
Subject: Re: [text-mask/text-mask] createNumberMask import (#522)

Hey mate, It's pretty easy to import that addon into an Angular project. What I did was import into my component this:
import createNumberMask from 'text-mask-addons/dist/createNumberMask';
then I create a variable calld numberMask like this into my component:
private numberMask = createNumberMask({ thousandsSeparatorSymbol: '.', allowDecimal: true, decimalSymbol: ',' })
finally into my component template:

and that's it, it works sweet for me. Hope I had Helped you out;)
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub https://github.com/text-mask/text-mask/issues/522#issuecomment-300557757 , or mute the thread https://github.com/notifications/unsubscribe-auth/AbClz_EuloujJxyA-LcfA3F3AurWh9Nlks5r4fWzgaJpZM4NPjxA . https://github.com/notifications/beacon/AbClz_64z3iCf73mkZZIJbu85twN1C6nks5r4fWzgaJpZM4NPjxA.gif

Was this page helpful?
0 / 5 - 0 ratings

Related issues

gabrielamarques picture gabrielamarques  Â·  6Comments

AliveDD picture AliveDD  Â·  5Comments

douglasdtc picture douglasdtc  Â·  3Comments

LXensen picture LXensen  Â·  6Comments

skube picture skube  Â·  3Comments