Ref

The ref directive is used to programmatically enable access to DOM elements for other parts of your application.

Type: ref<NativeElement extends Element = Element>(): Directive<Element> & { nativeElement: NativeElement }

INFO

ref is a pure Element directive.

Using ref

To use ref and create a reference to an Element, import the directive and setup a element reference to access.

import { createComponent, ref, on } from '@grainular/nord';

const component = createComponent((html) => {
    const _ref = ref<HTMLDivElement>();

    return html`<div ${_ref}>
        <button ${on('click', () => console.log(_ref.nativeElement))}></button>
    </div>`;
});

Clicking the button will log the HTMLDivElement to the console. After creating a ref instance, you can access the assigned element using the nativeElement property.

INFO

The nativeElement property will only be populated once the template is evaluated. You should account for that in your code.

⚡️

Code insights: You can see the function signature & implementation here: ref.ts