1

I am trying to make a mat-card navigable from the keyboard. Right now, when pressing tab the element is focused however the redirect event (should be the same as the click event) isn't triggered when pressing enter.

I've tried keydown.enter and onKeyDown (from a11y package) but no success so far.

HTML

<mat-card role="group" (click)="addQueryParam(group.name)" (keydown.enter)="addQueryParam(group.name)" class="mat-elevation-z0"
            [ngClass]="'background-'+index" (mouseout)="mouseOver=false"
    (mouseover)="mouseOver=true" style="padding: none; margin: 5px">

Typescript

  addQueryParam(groupName) {
    this.router.navigate(['/data'], { queryParams: { ['groups.title']: groupName }, queryParamsHandling: 'merge' });
  }

Any idea how to solve this issue?

TIA, Isabela

Isabela Dowsley
  • 21
  • 2

1 Answers1

0

I suggest you two things:

  1. try using (keyup.enter)=.... I used it a couple of times and it worked well
  2. If that doesn't work try using (keyup) or (keydown) and in your function check if the key code is 13 (enter key code), something like this:

HTML

<mat-card role="group" (click)="addQueryParam(group.name)" (keydown)="addQueryParam($event, group.name)" class="mat-elevation-z0"
            [ngClass]="'background-'+index" (mouseout)="mouseOver=false"
    (mouseover)="mouseOver=true" style="padding: none; margin: 5px">

Typescript:

addQueryParam($event, groupName) {
if($event.keyCode === 13){
    this.router.navigate(['/data'], { queryParams: ...);
 }
}

If i remember correctly you can check the type of the event in a field like event.type, or something like that.

Additionally check this discussion out, because theese functions are not well documented, and here you can find som infos : What are the options for (keyup) in Angular2?

EDIT

I also found this very useful article: https://medium.com/claritydesignsystem/angular-pseudo-events-d4e7f89247ee

Federico Andreoli
  • 465
  • 4
  • 17