# Await repeat.for rendering finish

**URL:** <https://discourse.aurelia.io/t/await-repeat-for-rendering-finish/4395>\
**Category:** Framework Knowledge\
**Created:** [September 3, 2021, 4:42am UTC](https://discourse.aurelia.io/t/await-repeat-for-rendering-finish/4395 "2021-09-03T04:42:18Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![MaximBalaganskiy](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/maximbalaganskiy/32/831_2.png) [@MaximBalaganskiy](https://discourse.aurelia.io/u/MaximBalaganskiy)\
**Post date:** [September 3, 2021, 4:42am UTC](https://discourse.aurelia.io/t/await-repeat-for-rendering-finish/4395/1 "2021-09-03T04:42:18Z")

</div>

Just wanted to share an easy trick in case you need to know when `repeat.for` finished rendering

```auto
import { customElement, noView } from 'aurelia-templating';
import { bindable } from 'aurelia-typed-observable-plugin';

@customElement('promise-resolver')
@noView
export class PromiseResolver {
  @bindable
  resolve: (value: unknown) => void;
  resolveChanged() {
    if (this.resolve) {
      this.resolve(undefined);
    }
  }

  // eslint-disable-next-line @typescript-eslint/no-empty-function
  bind() { }

  attached() {
    this.resolveChanged();
  }
}

```

Usage example

```auto
<div repeat.for="i of items">
  ${i}
  <promise-resolver resolve.bind="lastItemRendered" if.bind="$last"></promise-resolver>
</div>

```

```auto
items: number[];
lastItemRendered: (value: unknown) => void;

async loadItems() {
  this.items = [1,2,3];
  await new Promise(resolve => this.lastItemRendered = resolve);
  // do something after the items have been rendered
}

```