# Asynchronous loading in custom elements

**URL:** <https://discourse.aurelia.io/t/asynchronous-loading-in-custom-elements/2985>\
**Category:** Help Requests\
**Created:** [October 10, 2019, 3:58pm UTC](https://discourse.aurelia.io/t/asynchronous-loading-in-custom-elements/2985 "2019-10-10T15:58:58Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![m-gallesio](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/m-gallesio/32/1288_2.png) [@m-gallesio](https://discourse.aurelia.io/u/m-gallesio)\
**Post date:** [October 10, 2019, 3:58pm UTC](https://discourse.aurelia.io/t/asynchronous-loading-in-custom-elements/2985/1 "2019-10-10T15:58:58Z")

</div>

I am building a custom element which is basically a group of HTML `<select>`s. The options should be fetched from the backend via Promises and always come from the exact same source, while the selected values are directly bound to an object’s properties.

However, it seems components lack potentially asynchronous hooks during their building licefycle, unlike the `activate` hook of routable pages. I tried putting the backend calls in `bind`, but while the data does get loaded the association with the original selected values gets lost. `created` also does not seem to be asynchronous, at least according to the TypeScript type definitions.

I could load the options in the containing pages and bind them to the component, but since in this case the data sources are always going to be the same it would be somewhat cumbersome.

Right now, is there any way to force a component to wait for the loading promises to be fulfilled?

---

<div class="post-metadata">

**Author:** ![jbockle](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jbockle/32/607_2.png) [@jbockle](https://discourse.aurelia.io/u/jbockle)\
**Post date:** [October 11, 2019, 12:14am UTC](https://discourse.aurelia.io/t/asynchronous-loading-in-custom-elements/2985/2 "2019-10-11T00:14:05Z")

</div>

you can make the lifecycle methods async. once your property is set the repeat.for will bind your options.

i.e.  
typescript class

```auto
  public options: string[];
  public async bind() {
    this.options = await this.optionsService.get();
  }

```

template view

```auto
<select value.bind="selected">
  <option repeat.for="option of options" value.bind="option">${option}</option>
</select>

```

---

<div class="post-metadata">

**Author:** ![m-gallesio](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/m-gallesio/32/1288_2.png) [@m-gallesio](https://discourse.aurelia.io/u/m-gallesio)\
**Post date:** [October 11, 2019, 7:11am UTC](https://discourse.aurelia.io/t/asynchronous-loading-in-custom-elements/2985/3 "2019-10-11T07:11:43Z")

</div>

I had actually tried that and I just tried that again, but the actual loading is performed later than needed (in the current implementation the viewModel contains a getter which needs the option lists to be already present; async `bind` does not work and neither does `created`).  
I should note that my description of our use case was simplified (e.g. we use a wrapper component over the native `<select>`), so the problem could be elsewhere. Guess I’ll have to put more thought into this.

---

<div class="post-metadata">

**Author:** ![Alfhir](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/alfhir/32/1510_2.png) [@Alfhir](https://discourse.aurelia.io/u/Alfhir)\
**Post date:** [October 12, 2019, 9:25am UTC](https://discourse.aurelia.io/t/asynchronous-loading-in-custom-elements/2985/4 "2019-10-12T09:25:38Z")

</div>

Hi!

You could try [CompositionTransaction](http://blog.williamhayes.org/2016/03/aurelia-custom-element-async-life-cycle.html).  
But i don’t know, if that approach is dated and what the standard way to solve this would be.  
The question seems to show up once in a while and sadly i haven’t seen a “This is the Aurelia-Way to do it” answer yet. Maybe in V2 we’ll use an async binding and put a spinner on the select while the options are resolving. _shrug_

Best

---

<div class="post-metadata">

**Author:** ![m-gallesio](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/m-gallesio/32/1288_2.png) [@m-gallesio](https://discourse.aurelia.io/u/m-gallesio)\
**Post date:** [October 15, 2019, 12:28pm UTC](https://discourse.aurelia.io/t/asynchronous-loading-in-custom-elements/2985/5 "2019-10-15T12:28:50Z")

</div>

Thank you for your answers.

After some tests I found out simply using an `if.bind="options"` on the inner component works (that is, wait until the options are loaded before actually attaching the select). This can cause some layout thrashing, but in our case it seems fine enough.  
I suppose using a BindingSignaler for this purpose could also work.