CODEWITHSUNDEEP
angularangular-material
eladr
eladr

Reputation: 385

Detect keyboard navigation in angular material mat-selection-list

I want to make some actions When navigating between items using keyboard arrows.

Is there any event should i implemented? The selectionChange is fired by clicking ENTER but i want to activate the function while navigating by arrows.

<mat-selection-list #list (selectionChange)="selectionChange($event, list.selectedOptions)">
  <mat-list-option (mouseenter)="showEditIcon(true, i)" (mouseleave)="showEditIcon(false, i)"
                   *ngFor="let lotItem of lotList; let i = index;"
                   (click)="showLotDetails(lotItem, i)"
                   [value]='lotItem'>

Upvotes: 3

Views: 5274

Answers (1)

FAISAL
FAISAL

Reputation: 34673

You can use the keydown keyboard event on your mat-selection-list in order to call your selectionChange() method. You'll need to add both (keydown.arrowup) and (keydown.arrowdown) event handlers.

<mat-selection-list #list 
       (selectionChange)="selectionChange($event, list.selectedOptions)"
       (keydown.arrowup)="selectionChange($event)" 
       (keydown.arrowdown)="selectionChange($event)">

    <mat-list-option (mouseenter)="showEditIcon(true, i)" (mouseleave)="showEditIcon(false, i)"
                   *ngFor="let lotItem of lotList; let i = index;"
                   (click)="showLotDetails(lotItem, i)"
                   [value]='lotItem'>

Here is a StackBlitz Demo.

Upvotes: 5

Related Questions