Export value from custom-element

Hi all,

i created a custom element for datepicker.

but i’m not able to take the value of “dateStart” or “dateEnd” from external element… in the app.ts…
Anyone know the problem?!

Thank you,

You would need to write date-start.bindwhen using your element in HTML, since attribute names are dash-cased in the template code.

1 Like

But why the binding is called before the value is changed?

with the callback the value is correct, but with the binding the value is the past value…

Do you know?

Nothing … i understood, my error… the binding happens but after the callback… and i was logging all dates in the callback, so i had the last value.

However thank you!

Yes its is an expected behavior. Official doc here https://aurelia.io/docs/templating/html-behaviors-introduction#html-behavior-lifecycle

Tldr: custom element without bind life cycle method will have change handler (valueChanged in this case) called immediately if value is updated by its consumer (app.html) during initialisation


app.html: value.two-way will update <datepicker> value initially and thus trigger valueChanged

Add bind to <datepicker> if the behavior is not desirable

Anyone know why it gives me error?
I’m exporting a function to the the callback from a custome element…

i tryied to create the variable also as “any” and now “Function” but it gives the same error…

Thank you,

import { customElement, bindable, inject } from 'aurelia-framework';
import * as moment from 'moment';

export class DatePicker {
  @bindable currentDate: any;
  @bindable callback: Function;

  bind() {
    // just leave it empty if it needs to wait until element is attached to the document

  attached() {
    this.currentDate = moment(this.currentDate).format('YYYY-MM-DD');

  currentDateChanged() {