# Au2: access parent component viewmodel in a clean way

**URL:** <https://discourse.aurelia.io/t/au2-access-parent-component-viewmodel-in-a-clean-way/5378>\
**Category:** Uncategorized\
**Created:** [March 13, 2024, 10:32am UTC](https://discourse.aurelia.io/t/au2-access-parent-component-viewmodel-in-a-clean-way/5378 "2024-03-13T10:32:06Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![migajek](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/migajek/32/379_2.png) [@migajek](https://discourse.aurelia.io/u/migajek)\
**Post date:** [March 13, 2024, 10:32am UTC](https://discourse.aurelia.io/t/au2-access-parent-component-viewmodel-in-a-clean-way/5378/1 "2024-03-13T10:32:06Z")

</div>

In Aurelia 1 we had “Parent.of” resolver. I found this comment explaining why the `Parent.of` is no longer feasible in Au2: [Injecting a parent’s custom attribute doesn’t work · Issue #660 · aurelia/aurelia · GitHub](https://github.com/aurelia/aurelia/issues/660#issuecomment-538534357)

However, I don’t see the actual recommended solution. Did everyone just settle on accessing `this.$controller.parent.viewModel` in a lifetime hook?

This feels awkward, kinda messing with internal API. Also we have a `@children` decorator in Au2, so there’s a clean way for a reverse link.

Am I missing some clean solution for accessing parent?

---

<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, 2024, 11:05pm UTC](https://discourse.aurelia.io/t/au2-access-parent-component-viewmodel-in-a-clean-way/5378/3 "2024-03-13T23:05:27Z")

</div>

@migajek can you help with a repro to show the lack of capability?

---

<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:** [March 14, 2024, 11:16pm UTC](https://discourse.aurelia.io/t/au2-access-parent-component-viewmodel-in-a-clean-way/5378/4 "2024-03-14T23:16:52Z")

</div>

Can’t you just inject the parent’s view model? Used to work in AU1 without any decorators.  
Definitely works in aurelia2 gridstack plugin [aurelia-gridstack/packages/aurelia-gridstack/src/elements/grid-stack-item/grid-stack-item.ts at au2 · aurelia-ui-toolkits/aurelia-gridstack · GitHub](https://github.com/aurelia-ui-toolkits/aurelia-gridstack/blob/au2/packages/aurelia-gridstack/src/elements/grid-stack-item/grid-stack-item.ts)

See how Gridstack is injected into its’ children items

---

<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 15, 2024, 11:28pm UTC](https://discourse.aurelia.io/t/au2-access-parent-component-viewmodel-in-a-clean-way/5378/5 "2024-03-15T23:28:08Z")

</div>

The issue you are facing is because the difference in the container structure in v2, compared to v1. In v1, custom attribute participates in the container hierarchy, while it doesn’t in v2.

Though there are still easy / official way to get the parent custom attributes:

Supposed we have the following dom, like in the GH issue:

```html
<div au-dropdown>
  <div dropdown-toggle>
</div>

```

In the `AuDropdownToggle` attribute, you can search for `AuDropdown` controller in the link lifecycle like this:

```ts
class AuDropdownToggle {
  link(parentController) {
    const auDropDownController = parentController.children.at(-1);
    const auDropDown = auDropdownController.viewModel;
    ...
  }
}

```

Another way to get a custom attribute controller is to retrieve it based on DOM structure, like this:

```ts
import { resolve, CustomAttribute } from 'aurelia';
...
class AuDropdownToggle {
  constructor() {
    const host = resolve(Element);
    const dropdownEl = host.closest('[some-attribute-that-indicates-the-au-dropdown-usage]')
    const parentController = CustomAttribute.for(dropdownEl, 'au-dropdown')
  }
}

```

---

<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 18, 2024, 7:04am UTC](https://discourse.aurelia.io/t/au2-access-parent-component-viewmodel-in-a-clean-way/5378/6 "2024-03-18T07:04:17Z")

</div>

A PR has been created to address this, pls have a look at [feat(custom-attribute): ability to find closest attr by name or ctor by bigopon · Pull Request #1928 · aurelia/aurelia · GitHub](https://github.com/aurelia/aurelia/pull/1928)

---

<div class="post-metadata">

**Author:** ![migajek](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/migajek/32/379_2.png) [@migajek](https://discourse.aurelia.io/u/migajek)\
**Post date:** [March 26, 2024, 8:38am UTC](https://discourse.aurelia.io/t/au2-access-parent-component-viewmodel-in-a-clean-way/5378/7 "2024-03-26T08:38:47Z")

</div>

@bigopon thank you for the resolution. Sorry I was not able to provide examples on time, but it looks you got my intentions just right 🙂

---

<div class="post-metadata">

**Author:** ![migajek](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/migajek/32/379_2.png) [@migajek](https://discourse.aurelia.io/u/migajek)\
**Post date:** [April 5, 2024, 1:14pm UTC](https://discourse.aurelia.io/t/au2-access-parent-component-viewmodel-in-a-clean-way/5378/8 "2024-04-05T13:14:13Z")

</div>

as a side note - I just realized `link` doesn’t seem to be documented lifecycle hook. Is that a mistake in the documentation, or is this some kind of internal API?

---

<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:** [April 26, 2024, 12:15am UTC](https://discourse.aurelia.io/t/au2-access-parent-component-viewmodel-in-a-clean-way/5378/9 "2024-04-26T00:15:35Z")

</div>

yeah it should be doc’d. thanks @migajek