# Internalize Binding Behaviour within ValueConverter

**URL:** <https://discourse.aurelia.io/t/internalize-binding-behaviour-within-valueconverter/663>\
**Category:** Help Requests\
**Created:** [January 18, 2018, 6:49pm UTC](https://discourse.aurelia.io/t/internalize-binding-behaviour-within-valueconverter/663 "2018-01-18T18:49:27Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jeremyholt](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jeremyholt/32/1098_2.png) [@jeremyholt](https://discourse.aurelia.io/u/jeremyholt)\
**Post date:** [January 18, 2018, 6:49pm UTC](https://discourse.aurelia.io/t/internalize-binding-behaviour-within-valueconverter/663/1 "2018-01-18T18:49:27Z")

</div>

I have a ValueConverter to format numbers - originally based on numeral. Ever since I started to use i18n, I updated the ValueConverter to use Intl.NumberFormat, because I couldn’t work out how to load locales in numeraljs using typescript.

I had to hack the NumberFormatValueConverter to use the formatting currently in use throughout the app, because I didn’t want to change hundreds of references in the html.

The typical useage html using the original numeraljs formatting looks like this

```auto
 <div>${item.quantityKg | numberFormat: "0,0.000"}</div>
 <div>${item.price | numberFormat: "0,0.00"}</div>

```

If I add the behaviour `& signal : 'aurelia-translation-signal'` to the expression, the binding updates perfectly when the `i18n.locale` changes.

However, I want to avoid adding hundreds of the same behaviour to the html in my app.

What I would like to do, is internalize the binding behaviour within the NumberFormatValueConverter.

This is the `NumberFormatValueConverter`

```auto
export class NumberFormatValueConverter {

  public constructor(private readonly i18n: I18N) {

  }

  public toView(value: any, format: string) {
    if (value && isNaN(value)) {
      value = null;
    }

    if (format) {
      const arr = format.split("|");
      format = arr[0];
      if (arr.length > 1 && (value === 0 || value === null || value === undefined)) {
        return arr[1] === "null" ? "" : arr[1];
      }
    }

    let minimumFractionDigits = 0;
    let maximumFractionDigits = 0;
    let useGrouping = false;

    const partsThousands = format.split(",");

    if (partsThousands.length > 1) {
      useGrouping = true;

      const partsDecimalPlaces = partsThousands[1].split(".");
      if (partsDecimalPlaces.length > 1) {
        minimumFractionDigits = partsDecimalPlaces[1].length;
        maximumFractionDigits = minimumFractionDigits;
      }
    }

    const options = { minimumFractionDigits, maximumFractionDigits, useGrouping };

    const nf = this.i18n.nf(options, this.i18n.getLocale());
    const result = nf.format(value);

    return result;
  }
}

```

I looked at trying to override the `NfBindingBehavior` that comes with `aurelia-18n` but I’m not sure I really understand the concepts behind binding behaviours and gave up after a couple of hours.

So, my question is - how can I make `& signal : 'aurelia-translation-signal'` unobtrusively update NumberFormatValueConverter?

TIA  
Jeremy

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [January 18, 2018, 7:56pm UTC](https://discourse.aurelia.io/t/internalize-binding-behaviour-within-valueconverter/663/2 "2018-01-18T19:56:49Z")

</div>

So what you’re describing is actually kinda how the NfValueConverter + NfBindingBehavior is implemented. The idea is that the VC contains the logic, and the BH is just a wrapper, emporing the logic with signaling features. Looking at the BH source [over here](https://github.com/aurelia/i18n/blob/master/src/nf.js#L42) we register a custom signal `aurelia-translation-signal`. The next line, essentially just rewrites the expression used in your html to be passed on to the VC. [These lines](https://github.com/aurelia/i18n/blob/master/src/nf.js#L49-L52) just make sure it doesn’t happen twice.  
[Last but not least](https://github.com/aurelia/i18n/blob/master/src/nf.js#L55-L59) we set up the VC to be used, which uses the given expression, is based on the NfValueConverter and gets the binding arguments provided.  
During [cleanup](https://github.com/aurelia/i18n/blob/master/src/nf.js#L64) we just make sure nothing stays around to pollute the memory.

So that said, you can straight away copy the NfBindingBehavior and only change the [this line](https://github.com/aurelia/i18n/blob/master/src/nf.js#L57) to read `numberFormat` and then use the bindingbehavior further on in your html

```auto
 <div>${item.quantityKg & numberFormat: "0,0.000"}</div>
 <div>${item.price & numberFormat: "0,0.00"}</div>

```

Btw. in order to properly detect what the thousand separtor is, dunno if thats needed for your use case, [take a look](https://github.com/aurelia/i18n/blob/master/src/i18n.js#L78-L86) at how its determined based on the current locale in the method `uf`

---

<div class="post-metadata">

**Author:** ![jeremyholt](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jeremyholt/32/1098_2.png) [@jeremyholt](https://discourse.aurelia.io/u/jeremyholt)\
**Post date:** [January 19, 2018, 7:29am UTC](https://discourse.aurelia.io/t/internalize-binding-behaviour-within-valueconverter/663/3 "2018-01-19T07:29:52Z")

</div>

Ah - I was so close!

I did exactly what you suggested _except_ I hadn’t realized that I should have changed the pipe to `&`.

So instead of

```auto
 <div>${item.quantityKg & numberFormat: "0,0.000"}</div>

```

I had

```auto
 <div>${item.quantityKg | numberFormat: "0,0.000" & fn}</div> // I had to rename nf to fn to avoid conflicts.

```

It all makes sense now!

Many thanks  
Jeremy