Angular Material <mat-select> - execute function on blur

user_3935156 0
Viewed 6975

I have a <mat-select> element and I want to execute a function on blur of the element.

currently the function executes on selection change:

<mat-form-field fxFlex>
  <mat-label>SSR Status</mat-label>
  <mat-select [formControl]="ssrStatuses" multiple (selectionChange)="filtersUpdated()" [(value)]="selectedSsrStatuses">
    <mat-option *ngFor="let ssrStatus of ssrStatusList" [value]="ssrStatus.id">{{ssrStatus.label}}</mat-option>
  </mat-select>
</mat-form-field>

I can't see any mention of blur or focus in the angular material mat-select docs. These docs on angular 4 mention (blur)="myMethod()" but that doesn't work on my <mat-select>. How do I execute a function on blur of <mat-select>?

angular-material angular
2 Answers

If it is still actual, try to use closed event:

<mat-select (closed)="someMethod()">
  <mat-option></mat-option>
</mat-select>
user_119222770

Many native DOM events works with Angular. In fact, you should have test blur event you find in Angular 4 docs because it works

// some html    
<h4>Basic native select</h4>
    <mat-form-field>
      <mat-label>Cars</mat-label>
      <select (blur)="blurred()" matNativeControl required>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </select>
    </mat-form-field>

Basic blurred method :

// some component.ts
blurred() {
    console.log('blurred !')
  }

Bonus, stackblitz example :

user_74470710
Related