Facing Issue with Custom Attribute Binding

1

Hello guys! :smiling_face_with_three_hearts:

I am new to Aurelia and I am running into an issue with custom attribute binding that I can’t seem to resolve. I’m trying to create a custom attribute that formats a number as currency. Here’s what I have so far:

import { bindable } from 'aurelia-framework';

export class CurrencyCustomAttribute {
  @bindable value;

  valueChanged(newValue) {
    this.element.innerHTML = newValue.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
  }

  bind() {
    this.valueChanged(this.value);
  }
}

And here is how I am using it in my HTML:

<span currency="amount"></span>

The amount is a property in my view-model that holds a numeric value. However, when I run my application, the binding doesn’t seem to work correctly. The span element does not get updated with the formatted currency.

I also check this resource: https://discourse.aurelia.io/t/custom-attribute-bindable-property-does-not-callcallooker But I have not found any solution.

Thanks in advance! :innocent: