# Defer component lifecycle

**URL:** <https://discourse.aurelia.io/t/defer-component-lifecycle/3241>\
**Category:** Help Requests\
**Created:** [February 16, 2020, 3:23am UTC](https://discourse.aurelia.io/t/defer-component-lifecycle/3241 "2020-02-16T03:23:41Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![josiahhaswell](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/josiahhaswell/32/1266_2.png) [@josiahhaswell](https://discourse.aurelia.io/u/josiahhaswell)\
**Post date:** [February 16, 2020, 3:23am UTC](https://discourse.aurelia.io/t/defer-component-lifecycle/3241/1 "2020-02-16T03:23:41Z")

</div>

Hi folks,

I’m creating Uikit bindings for Aurelia, and I have a pretty common pattern that’s currently stumping me. For example, I have a navigation component that can be attached to a panel component. In a certain configuration, the navigation component pops out a drawer containing a panel that’s defined in the navigation component along the lines of:

```
        div(slot="right")
        aire-navbar(light small rotate right target.bind="drawer")
            aire-panel
                aire-header
                    i.fal.fa-code-merge
                    h1 hello

            aire-panel
                aire-header
                    i.fal.fa-palette
                    span Palettes
                aire-body

            aire-panel(click.trigger="show()" active="true")
                aire-header
                    i.fal.fa-brackets-curly
                    span Generated
            aire-panel
                aire-header
                    i.fal.fa-code-merge
                    span History

            aire-drawer(
                ref="drawer"
                host="ancestor:nav"
                visible.bind="drawerOpen"
                opens="left" width="400"
            )

```

Which generates something that looks like:

 ![side-nav](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/4/4ca3c2cf9d6814828a65f299b8cd211a65dd20e7.png)

What I would like to do is

1.) generate the navbar button from the header element (working, but probably not ideal at [https://github.com/sunshower-io/aire/tree/components/container/src/main/nav](https://github.com/sunshower-io/aire/tree/components/container/src/main/nav))  
2.) defer the lifecycle for the subcomponent (in this case, aire-panel) until it’s activated by someone clicking its corresponding button in the menu. Ideally, I would like to remove and add the panel to the DOM only when it’s active.

Any help would be greatly appreciated!

Josiah

---

<div class="post-metadata">

**Author:** ![tristanh](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/tristanh/32/1738_2.png) [@tristanh](https://discourse.aurelia.io/u/tristanh)\
**Post date:** [February 16, 2020, 7:27am UTC](https://discourse.aurelia.io/t/defer-component-lifecycle/3241/2 "2020-02-16T07:27:08Z")

</div>

For question number 2, to only render the component when it’s active. Not sure if this is what you want but shouldn’t a simple if.bind=“panel.isActive” suffice?  
This way the aire-panel will only be renderend if it’s property “isActive” is true, which you can set via an (click) event or something.

Not sure if this is what you we’re looking for, might be better ways. It’s just an idea 😊

---

<div class="post-metadata">

**Author:** ![josiahhaswell](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/josiahhaswell/32/1266_2.png) [@josiahhaswell](https://discourse.aurelia.io/u/josiahhaswell)\
**Post date:** [February 16, 2020, 9:21pm UTC](https://discourse.aurelia.io/t/defer-component-lifecycle/3241/3 "2020-02-16T21:21:56Z")

</div>

Thanks for the response! The issue with if.bind is that I need a portion of the panel’s DOM to lay out the menu, and I’m not sure the best way to access that. If I use show.bind, then the panel gets laid out and the actual HTML is generated. I would prefer to delay any rendering of the panel until it’s inserted into the drawer.

---

<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:** [February 27, 2020, 9:23am UTC](https://discourse.aurelia.io/t/defer-component-lifecycle/3241/4 "2020-02-27T09:23:07Z")

</div>

Hi,

maybe use [CompositionTransaction](http://blog.williamhayes.org/2016/03/aurelia-custom-element-async-life-cycle.html) for delaying the rendering?

---

<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:** [March 13, 2020, 1:48am UTC](https://discourse.aurelia.io/t/defer-component-lifecycle/3241/5 "2020-03-13T01:48:45Z")

</div>

Every composition transaction will allow you to defer only once, which means it’s not easy to defer lifecycle of subtree at a later point rather than start up at the moment. You will need to combine compose + locally registered composition transaction to achieve that