material 2 Autocomplete: select option

Question

I want to call a function when an option is selected. After some search it seem that i have to use :

property optionSelections of MdAutocompleteTrigger

In the documentation : https://material.angular.io/components/component/autocomplete optionSelections Stream of autocomplete option selections.

I dont understand that , what is a stream, how to implement this ?

Answer 1

The Material Autocomplete component has its own optionSelected event output:

Template:

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

Controller:

import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';  // ...  onSelectionChanged(event: MatAutocompleteSelectedEvent) {   console.log(event.option.value); } 

See: Angular Material API Docs - MatAutocompleteSelectedEvent

Answer 2

On md-option you can set "onSelect"

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

Since beta 3, functionality has changed:

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