Best practice for referencing this.element

Help Requests
1

Hi,

Just a quick question as I dont find it explicitly in the documentation.What’s the current best practice for referencing the component’s DOM element from the controller?

Is it to inject the INode list this?

import {inject, INode} from "aurelia";

@inject(INode)
export class MyComponent {
    constructor(private element: INode) {}
}

That seems to be working, but I’m not sure if it’s idiomatic Aurelia.

Thanks for any input.

2

I don’t know the best practice, but you can also just inject @inject(Element)

constructor(protected element: Element) {
2 Likes
3

Sorry, this post flew under the radar for me when I took a couple of weeks break. So, yeah, injecting element or INode will get you the element instance itself for the component or attribute. For anything else you would want refattribute.

1 Like
4

Thanks, i was using Element but in the docs I saw INode a lot so I switched but was unsure. I was an Aurelia 1 user, but switched to Aurelia 2 early on. I still feel a bit intimidated by the IThings, INode, IDialogService, IEventAggregator… I understand they are typescript interfaces, but it seems strange to me that we can inject and instantiate objects from interfaces.
Is there a difference between using INode and Element?

5

Theres no difference what value you will get, but using Element breaks Node while INode works everywhere. Generally I would say keep using what you used in v1, theres no need to change unless you want to go fancy with designing application using interfaces. Interfaces allow us some decoupling to avoid circular dependency issue sometimes.

2 Likes