Export value from custom-element

Help Requests
1

Hi all,

i created a custom element for datepicker.

image
image.png1379×1049 58.7 KB

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,
Andrea

2

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
3

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

image
image.png1158×790 29.8 KB

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!
Andrea

4

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

Flow:

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

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

5

image
image.png1259×940 103 KB

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,
Andrea

6 

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

@customElement('datepicker')
@inject(Element)
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() {
    this.callback(this.currentDate);
  }
}