How to focus elements with D-Pad in NativeScript?

Question

I have an application, running on my TV. but when I use the remote - i see the list scrolling, but I can't see which item is being "focused". so I tried regular CSS style nothing works. then I came across a document that suppose to be "very easy" but i'm unable to implement it as it display a "native" NativeScript app not an Angular NativeScript part ...

I'm following the document: https://blog.nativescript.org/building-an-android-tv-app-with-nativescript/

The key events listener for the entire app suppose to be the following code:

public dispatchKeyEvent(event: android.view.KeyEvent): boolean {
    // you can respond to specific keycodes by fi. registering a listener and invoking it when appropriate
    console.log("D-Pad center button pressed? " + (event.getKeyCode() === android.view.KeyEvent.KEYCODE_DPAD_CENTER));

    // let's highlight the element that currently has the focus
    const tnsButton = <ViewBase>this.getCurrentFocus()["jsview"];
    if (tnsButton && tnsButton !== this.highlightedElement) {
      tnsButton.addPseudoClass("focused");
      if (this.highlightedElement) {
        this.highlightedElement.deletePseudoClass("focused");
      }
      this.highlightedElement = tnsButton;
    }
    return super.dispatchKeyEvent(event);
  }

But i'm not sure where exactly to place it, main.ts doesn't seem to be "it". So I tried the second part of the document, with the code inside every page:

export function elementLoaded(args: observable.EventData): void {
  const view = <ViewBase>args.object;

  // set a backreference so 'dispatchKeyEvent' in app.ts can swap CSS classes
  view.android["jsview"] = args.object;
}

But i'm unable to import observable.EventData there's no information in NS docs or anywhere about observable only Observable ( which i'm guessing coming from import { Observable } from "@nativescript/core/data/observable"; )

Someone knows how to focus an element when navigating with D-pad ?