Signal Aurelia Custom Attribute?

Help Requests
1

For the binding, I can use signal in case the value is externally updated. How about a custom attribute?

I have the following data-language custom attribute:

import { customAttribute, autoinject } from 'aurelia-framework';
import { LanguageService } from "./language";

@autoinject
@customAttribute("data-language")
export class LanguageCustomAttribute {

    private value: string;

    constructor(
        private element: Element,
        private languageService: LanguageService) { }

    public bind() {
        var e = $(this.element);
        e.html(this.languageService.getText(e.attr("data-language")));
    }

}

This custom attribute is globally registered using

  aurelia.use
      .standardConfiguration()
      .globalResources("./components/language/data-language");

Now assume user can change a language at runtime (and the result of this.languageService.getText would change). How can I send a signal so all [data-language] elements are updated?

2

This is exactly what the TCustomAttribute from aurelia/i18n does.

3

Thank you for the help. If I understand correctly, it uses EventAggregator right? Could you elaborate how I can trigger such event?

this.subscription = this.ea.subscribe('i18n:locale:changed', () => {
  this.service.updateValue(this.element, this.value, this.params !== null ? this.params.value : undefined);
});

Is the name i18n:locale:changed anything I want, can I register a custom one?

4

Thats correct, it uses the EventAggregator. The event is triggered by the i18n service, which emits the new event once the user changes the active locale.

The name i18n:locale:changed can be really whatever you want as it just names the event itself. Additionally during emit, you’ll likely want to pass on additional data, as depicted in linked sample

1 Like
5

Wonderful! Thanks a lot.