• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

How To Use Autonumeric.js With Aurelia

Aurelia 1 Tutorials · August 20, 2020

As a long-term user of the InputMask plugin, I’ve long put up with its downsides such as issues around negative amounts and decimals.

Recently, I was tasked with integrating Autonumeric into an Aurelia application at work and the result was simple and elegant, I thought I would share it.

The result works out a lot nicer than InputMask which I personally find to be an absolute nightmare to work with for currency scenarios especially.

Install Dependencies

We will be using the autonumeric plugin as well as lodash for this one. You can replace the Lodash dependency with your own solution if you like.

npm install autonumeric lodash

Create The Component

Create a new file called auto-numeric.ts and add in the following. This is the view-model for our custom element.

import { customElement, bindingMode } from 'aurelia-framework';

import AutoNumeric from 'autonumeric';
import { bindable } from 'aurelia-framework';
import merge from 'lodash/defaultsDeep';

// Equivalent of setting 'dollar' as the secondary config option for the plugin
const defaultOptions = {
  digitGroupSeparator          : ',',
  decimalCharacter             : '.',
  currencySymbol               : '$',
  currencySymbolPlacement      : 'p',
  negativePositiveSignPlacement: 'r'
};

@customElement('auto-numeric')
export class IaNumeric {
  private im;
  private input: HTMLInputElement;

  @bindable({ defaultBindingMode: bindingMode.twoWay }) value;
  @bindable() options;

  constructor(private element: Element) {

  }

  attached() {
    this.im = new AutoNumeric(this.input, merge(this.options, defaultOptions));

    this.im.set(this.value);

    this.element.addEventListener('autoNumeric:rawValueModified', this.rawValueChanged);
  }

  detached() {
    this.element.removeEventListener('autoNumeric:rawValueModified', this.rawValueChanged);
  }

  rawValueChanged = () => {
    this.value = this.im.getNumber();
  }

  optionsChanged() {
    if (this.im) {
      this.im.update(merge(this.options, defaultOptions));
    }
  }
}

Now, create a view for our custom element auto-numeric.html

<template>
  <input type="text" ref="input" one-time.bind="value">
</template>

Usage

To use the plugin, make sure you import it and then you reference it like any normal input. Now, the value going in doesn’t override the input when you type into it, we only care about the value coming out.

<auto-numeric value.bind="myVar"></auto-numeric>

Dwayne

Leave a Reply Cancel reply

0 Comments
Inline Feedbacks
View all comments

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Waiting for an Element to Exist With JavaScript
  • Thoughts on the Flipper Zero
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • How To Paginate An Array In Javascript
  • How To Mock uuid In Jest
  • How to Copy Files Using the Copy Webpack Plugin (without copying the entire folder structure)
  • Reliably waiting for network responses in Playwright
  • Wild Natural Deodorant Review

Recent Comments

  • Dwayne on Is Asking Developers How to Write FizzBuzz Outdated?
  • kevmeister68 on Is Asking Developers How to Write FizzBuzz Outdated?
  • Kevmeister68 on Start-Ups and Companies That Embrace Work From Anywhere Will Be More Likely to Survive the Coming Recession in 2023
  • kevmeister68 on What Would Get People Back Into the Office?
  • Dwayne on PHP Will Not Die

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz