I am looking for a way to figure out when an mat-option inside the mat-autoplete was either clicked or was selected using the enter key.

The click event binding works as expected but the keyup.enter or even just the keyup event doesn't work.

Is this a bug in the library or I am doing something wrong?

<mat-option (click)="onEnter()" (keyup.enter)="onEnter()" *ngFor="let state of filteredStates | async" [value]="state.name">

Here's a live example -

Update: Please mention if there's a better way to handle the selection of an option at the <mat-option> element level.

I am looking for a way to figure out when an mat-option inside the mat-autoplete was either clicked or was selected using the enter key.

The click event binding works as expected but the keyup.enter or even just the keyup event doesn't work.

Is this a bug in the library or I am doing something wrong?

<mat-option (click)="onEnter()" (keyup.enter)="onEnter()" *ngFor="let state of filteredStates | async" [value]="state.name">

Here's a live example - https://angular-3okq5u.stackblitz.io

Update: Please mention if there's a better way to handle the selection of an option at the <mat-option> element level.

• javascript
• angular
• events
• angular-material
• keyup

• can you share your code in online ide?? – HBK Commented Dec 4, 2017 at 11:04
• Best way I have found is not to use Angular Material and instead just use HTML and Angular. <div class="use-angular-material-css-here" (keyup.enter)="worksEveryTime('YES')"> Plus you can still get the visual interaction with matRipple – SoEzPz Commented Jan 12, 2023 at 20:54

4 Answers 4

Use onSelectionChange event in options if you want to trigger a function on option change. it will also trigger if you use keyboard to select the auto-plete option which you are trying to achieve here.

<input (keyup.enter)="onEnter($event)" matInput placeholder="State" aria-label="State" [matAutoplete]="auto" [formControl]="stateCtrl">
    <mat-autoplete  #auto="matAutoplete">
      <mat-option  (onSelectionChange)="onEnter($event)" (click)="onEnter()"  *ngFor="let state of filteredStates | async" [value]="state.name">
        <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" />
        <span>{{ state.name }}</span> |
        <small>Population: {{state.population}}</small>
      </mat-option>
    </mat-autoplete>

Update

onSelectionChange event is triggering twice whenever you change the option and it's because of the existing issue in Angular material. Work around for the issue is also given that you should check the event before doing anything inside the function.

 onEnter(evt: any){
    if (evt.source.selected) {
    alert("hello ");
    }
  }

Working demo

I used:

<mat-option (onSelectionChange)="choose(item)" 
            *ngFor="let item of keyWord" value="{{item}}"> {{item}} </mat-option>

autoActiveFirstOption

Using the autoActiveFirstOption directive it is possible to trigger the optionSelected event with the enter key. This is exactly the behaviour I wanted when trying to register the enter key event.

<mat-autoplete autoActiveFirstOption (optionSelected)='setSearchValue($event.option.value)'>

I realized that instead of handling click or keyup.enter (which was not working) events on the mat-option element, we can just simply listen to selectionChange on the mat-select element itself. That way the keyboard enter press event is fired properly. And then access the value selected on the callback like this:

<mat-select [(value)]="selectedOption" (selectionChange)="setOption($event)">
    <mat-option *ngFor="let option of options" [value]="option.value" [attr.arialabel]="option.value">
      {{ lang.name }}
    </mat-option>
  </mat-select>

And then, handle it like:

setOption(optionChangedEvent: MatSelectChange) {
   console.log(optionChangedEvent.value);
   [rest of logic goes here]
}