Making a custom angular component from another library clickable with "enter" key

The problem

tl;dr: An angular component I'm creating isn't clickable via enter.

I have a library built with stencil that defines & creates a bunch of angular components to use across a set of apps.

I'm trying to create a navigation link to use from that library:

@Component({
  tag: "test-nav-link",
  styleUrl: "test-nav-link.css",
  shadow: true,
})
export class TestNavLink {
  @Prop() href?: string;
  @Prop() label?: string;
  @Prop() target?: string;
  @Prop() rel?: string;
  @Prop() active = false;
  @Prop() icon?: IconList;
  @Prop() iconsize = IconSizeList.md;

  render() {
    return (
      <a
        data-active={this.active}
        href={this.href}
        target={this.target}
        rel={this.rel}
      >
        {this.icon && (
          <icon
            icon={this.icon}
            iconsize={this.iconsize}
            icontype={IconTypeList.text}
          />
        )}
        {this.label}
      </a>
    );
  }
}

And then I can use this in the navbar for one of my apps as so:

<test-layout-nav>
  <test-nav-link routerLink="site"
                 routerLinkActive="{{ activeClass }}"
                 label="Site">
  </test-nav-link>
  <test-nav-link routerLink="page"
                 routerLinkActive="{{ activeClass }}"
                 label="Page">
  </test-nav-link>
  <div class="nav-actions" slot="actions">
    <app-search></app-search>
    <settings></settings>
  </div>
</test-layout-nav>

This works if you use href (i.e. in one of the spaces where we don't have access to angular).

This does not work when using angular's routerLink - it renders fine, I can press the button, I can even tab to it, but when I press enter, it doesn't act as a link.

What I've tried

Adding routerLink to the component

I've tried adding routerLink as an additional @Prop on the component, and then changing the href to:

href={this.href ? this.href | this.routerLink}

This makes it clickable, but then the page loads twice; once via routerLink, once via href.

Adding keydown.enter where code is used

I can change the nav usage to look as follows:

  <test-nav-link routerLink="site"
                 routerLinkActive="{{ activeClass }}"
                 (keydown.enter)="onEnter('site')"
                 label="Site">
  </test-nav-link>

This works, but it feels like it adds a lot of boilerplate; the point of having a separate library of components is that you need to write stuff like this once, and then can use the components everywhere.

Other

I tried some weird stuff with tabindex=-1 to see if I could force the anchor element to be clickable, but yeah, no dice.

Any advice? The only thing I can think of left is scrap this component as an idea and go back to using <a> on its own.

If you look at the documentation, you will see that the routerLink is actually a directive that manages the clicks for you (line 267~ish)

So, given that, you can probably try to trigger a click when you press enter :

<test-nav-link #link routerLink="site"
                 routerLinkActive="{{ activeClass }}"
                 (keydown.enter)="link.click()"
                 label="Site">
  </test-nav-link>

Or this one, maybe :

<test-nav-link routerLink="site"
                 routerLinkActive="{{ activeClass }}"
                 (keydown.enter)="$any($event.target).click()"
                 label="Site">
  </test-nav-link>

To add to MGX's post above, this is pretty easy to map to the stencil library:

  @Listen('keydown')
  handleKeyDown(ev: KeyboardEvent) {
    if (ev.key === 'Enter') {
      if (this.routerLink !== undefined) {
        this.hostElement.click();
      }
    }
  }

Thanks MGX!