материал 2 Автозаполнение: выберите вариант

В опции md вы можете установить «onSelect»

<md-autocomplete #auto="mdAutocomplete">
    <md-option (onSelect)="callSomeFunction()" *ngFor="let state of states" [value]="state.name">{{ state.name }}</md-option>
</md-autocomplete>

Начиная с бета-версии 3 функциональность изменилась:

<md-autocomplete #auto="mdAutocomplete">
    <md-option (onSelectionChange)="callSomeFunction()" *ngFor="let state of states" [value]="state.name">{{ state.name }}</md-option>
</md-autocomplete>

Компонент автозаполнения материалов имеет собственный вывод события optionSelected:

Шаблон:

<mat-autocomplete (optionSelected)="onSelectionChanged($event)"> 
  <mat-option *ngFor="let item of myItems" [value]="item">
    {{ item }}
  </mat-option>
</mat-autocomplete>

Контроллер:

import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';

// ...

onSelectionChanged(event: MatAutocompleteSelectedEvent) {
  console.log(event.option.value);
}

См.: Документация по Angular Material API — MatAutocompleteSelectedEvent

Я не мог получить ответ «onSelect» с последним угловым материалом (2.0.0-beta.3). Это никогда не называлось.

Теперь я нахожу, что это:

  <md-option *ngFor="let item of item" [value]="item.name" (onSelectionChange)="myChangeFunc($event, item)">
    {{ item.name }}
  </md-option>

Другими словами, теперь он называется onSelectionChange. Документы по-прежнему кажутся расплывчатыми и продолжают говорить «Поток выбора параметров автозаполнения», что на самом деле ничего не значит.

См. также ответ Франческо, однако в большинстве ситуаций вам нужно будет передать $event, чтобы проверить информацию о событии.

Событие onSelectionChange заменило событие selected. Теперь можно узнать, когда элемент выбран или не выбран.

Необходимо передать параметр $event целевому методу, чтобы различать два случая, иначе md-autocomplete вызовет метод дважды (один раз с новым выбранным элементом и один раз с невыбранным/предыдущим значением).
Было бы неплохо, если бы в документации было немного больше ясности об этих изменениях.

Ниже показано, как получить только событие "on select":

Шаблон

<md-autocomplete #panel="mdAutocomplete" [displayWith]="displayFn">
  <md-option (onSelectionChange)="selected($event, country)" 
             *ngFor="let country of filteredCountries | async" [value]="country">
    <div class="selector-elements">
        {{ country.name }}
      </div>
</md-option>

Controller

 selected(event: MdOptionSelectionChange, country: ICountry) {
    if (event.source.selected) {
        this.propagateChange(country);
    }
}