# Export value from custom-element

**URL:** <https://discourse.aurelia.io/t/export-value-from-custom-element/1361>\
**Category:** Help Requests\
**Created:** [June 20, 2018, 3:43pm UTC](https://discourse.aurelia.io/t/export-value-from-custom-element/1361 "2018-06-20T15:43:11Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![AndreaProgrammerIt](https://avatars.discourse-cdn.com/v4/letter/a/e9a140/32.png) [@AndreaProgrammerIt](https://discourse.aurelia.io/u/AndreaProgrammerIt)\
**Post date:** [June 20, 2018, 3:43pm UTC](https://discourse.aurelia.io/t/export-value-from-custom-element/1361/1 "2018-06-20T15:43:11Z")

</div>

Hi all,

i created a custom element for datepicker.

 ![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/1X/bcea84682ef98a34d5e907dae2b21a1f483bd849.png)

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

---

<div class="post-metadata">

**Author:** ![mp24](https://avatars.discourse-cdn.com/v4/letter/m/f05b48/32.png) [@mp24](https://discourse.aurelia.io/u/mp24)\
**Post date:** [June 20, 2018, 6:38pm UTC](https://discourse.aurelia.io/t/export-value-from-custom-element/1361/2 "2018-06-20T18:38:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![AndreaProgrammerIt](https://avatars.discourse-cdn.com/v4/letter/a/e9a140/32.png) [@AndreaProgrammerIt](https://discourse.aurelia.io/u/AndreaProgrammerIt)\
**Post date:** [June 21, 2018, 6:47am UTC](https://discourse.aurelia.io/t/export-value-from-custom-element/1361/3 "2018-06-21T06:47:07Z")

</div>

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

 ![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/1X/f97426e40abff5f5a91bba4f8c563272893c8f87.png)

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

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [June 21, 2018, 7:28am UTC](https://discourse.aurelia.io/t/export-value-from-custom-element/1361/4 "2018-06-21T07:28:27Z")

</div>

Yes its is an expected behavior. Official doc here [https://aurelia.io/docs/templating/html-behaviors-introduction#html-behavior-lifecycle](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

---

<div class="post-metadata">

**Author:** ![AndreaProgrammerIt](https://avatars.discourse-cdn.com/v4/letter/a/e9a140/32.png) [@AndreaProgrammerIt](https://discourse.aurelia.io/u/AndreaProgrammerIt)\
**Post date:** [June 22, 2018, 9:17am UTC](https://discourse.aurelia.io/t/export-value-from-custom-element/1361/5 "2018-06-22T09:17:35Z")

</div>

![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/1X/22bd66f03f3aad8f90e8e580121b13f0fac88650.png)

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

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [June 22, 2018, 10:47am UTC](https://discourse.aurelia.io/t/export-value-from-custom-element/1361/6 "2018-06-22T10:47:32Z")

</div>

```auto

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);
  }
}

```