CODEWITHSUNDEEP
angularangular-materialkeyboard-events
N.Cristian
N.Cristian

Reputation: 17

How to listen to keydown event on angular material table

I want to listen to keyboard event on the angular-material table to manipulate the selected row. I have tried with the directive:

@Directive({
    selector: '[keyDownAction]'
})
export class KeyDownDirective {
    constructor() {
    }

@HostListener('keydown', ['$event'])
handleClick(event: Event) {
    console.log(event);
}

}

host listening:

  host: { '(keydown)': 'hotkeys($event)' },

and direct:

    <mat-row *matRowDef="let row; columns: displayedColumns; let i=index"
             [focus]="selectedRow==i"
             (click)="clickOnRow(row, $event, i)"
             (dblclick)="dblClickOnRow(row, $event, i)"
             (keydown)="keyDownFunction($event)"
             >

where click and dblclick works.

Do anybody know a workaround?

Upvotes: 1

Views: 2676

Answers (1)

crowmagnumb
crowmagnumb

Reputation: 7117

I know this is a very late answer but for future finders of this issue...

Anything that is not an <input> needs the tabindex attribute in order for the keydown event to fire. Any index number will do. Simply change your code to be...

<mat-row *matRowDef="let row; columns: displayedColumns; let i=index"
         tabindex=0
         [focus]="selectedRow==i"
         (click)="clickOnRow(row, $event, i)"
         (dblclick)="dblClickOnRow(row, $event, i)"
         (keydown)="keyDownFunction($event)"
>

Upvotes: 6

Related Questions