Угловой материал- выполнить функцию на размытие

Question

У меня есть элемент <mat-select>, и я хочу выполнить функцию размытия элемента.

В настоящее время функция выполняется при изменении выбора:

<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>

Я не могусм. любое упоминание о размытии или фокусировке в документах по выбору углового материала. В этих документах на угловых 4 упоминается (blur)="myMethod()", но это не работает на моем <mat-select>.Как выполнить функцию размытия <mat-select>?

Answer 1

Многие нативные события DOM работают с Angular. Фактически, у вас должно быть тестовое размытие, которое вы найдете в документах Angular 4, потому что оно работает

// 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>

Основной метод размытия:

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

Бонус, пример стекаблиц :