# Run code when an element is shown?

**URL:** <https://discourse.aurelia.io/t/run-code-when-an-element-is-shown/1180>\
**Category:** Help Requests\
**Created:** [May 1, 2018, 6:52pm UTC](https://discourse.aurelia.io/t/run-code-when-an-element-is-shown/1180 "2018-05-01T18:52:24Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![EMooreMAC](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/emooremac/32/894_2.png) [@EMooreMAC](https://discourse.aurelia.io/u/EMooreMAC)\
**Post date:** [May 1, 2018, 6:52pm UTC](https://discourse.aurelia.io/t/run-code-when-an-element-is-shown/1180/1 "2018-05-01T18:52:24Z")

</div>

Is there a built in way to run code when an element with an if.bind is shown or destroyed? Something like init.delegate="".

Normally I would implement a …Changed(newValue, oldValue) method for the property being evaluated in the if.bind, but the case I have is more complicated, I can’t put code on the object being checked.

Not sure if I’m approaching this the right way or not…

Thanks-

Erik

---

<div class="post-metadata">

**Author:** ![Malexion](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/malexion/32/188_2.png) [@Malexion](https://discourse.aurelia.io/u/Malexion)\
**Post date:** [May 1, 2018, 8:33pm UTC](https://discourse.aurelia.io/t/run-code-when-an-element-is-shown/1180/2 "2018-05-01T20:33:17Z")

</div>

If your if binding on the outside of a custom element it should be firing the attached() and detached() methods within that element’s view model when it is attached to the dom and removed from it.

---

<div class="post-metadata">

**Author:** ![Malexion](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/malexion/32/188_2.png) [@Malexion](https://discourse.aurelia.io/u/Malexion)\
**Post date:** [May 1, 2018, 8:38pm UTC](https://discourse.aurelia.io/t/run-code-when-an-element-is-shown/1180/3 "2018-05-01T20:38:31Z")

</div>

If you are if binding to an element that isn’t a custom element and can’t be a custom element you could create a custom attribute that can give you callbacks for attached() and detached() using something like the `@dynamicOptions` decorator to allow you to bind those callbacks.

---

<div class="post-metadata">

**Author:** ![EMooreMAC](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/emooremac/32/894_2.png) [@EMooreMAC](https://discourse.aurelia.io/u/EMooreMAC)\
**Post date:** [May 1, 2018, 8:45pm UTC](https://discourse.aurelia.io/t/run-code-when-an-element-is-shown/1180/4 "2018-05-01T20:45:33Z")

</div>

A custom attribute is a great idea! I’ll explore now. Thanks for the suggestion.

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [May 1, 2018, 11:50pm UTC](https://discourse.aurelia.io/t/run-code-when-an-element-is-shown/1180/5 "2018-05-01T23:50:43Z")

</div>

For a simple reusable custom attribute, you can try this to hook up attached callback.  
detached would almost be a copy-paste.

```auto
<button if.bind="condition" 
        attached.call="btnAttached()">My button</button>

```

```auto
export class AttachedCustomAttribute {
  attached() {
    if (typeof this.value === 'function') {
      this.value();
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [May 1, 2018, 11:54pm UTC](https://discourse.aurelia.io/t/run-code-when-an-element-is-shown/1180/6 "2018-05-01T23:54:26Z")

</div>

Comparing to @Malexion’s suggestion using @dynamicOptions (which definitely works), I feel separating attached and detached custom attributes is easier to understand, and easier to use.

---

<div class="post-metadata">

**Author:** ![EMooreMAC](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/emooremac/32/894_2.png) [@EMooreMAC](https://discourse.aurelia.io/u/EMooreMAC)\
**Post date:** [May 2, 2018, 5:16pm UTC](https://discourse.aurelia.io/t/run-code-when-an-element-is-shown/1180/7 "2018-05-02T17:16:14Z")

</div>

Agreed. Thank you much for this.