26

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 ?

Yoamb
  • 475
  • 1
  • 5
  • 17
  • I am able to have MdAutocompleteTrigger In my component i add : `@ViewChild(MdAutocompleteTrigger) trigger:MdAutocompleteTrigger;` ` ngAfterContentInit() { setTimeout(() =>this.trigger.openPanel()); }` but i cannot use optionSelections, can someone can give me an example – Yoamb Feb 24 '17 at 00:20
  • I try this `ngAfterContentInit() { setTimeout(() => Observable.merge(...this.trigger.optionSelections) .subscribe((option)=>console.log(option))); }` but not working – Yoamb Feb 24 '17 at 00:26

4 Answers4

66

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

Martin Schneider
  • 14,263
  • 7
  • 55
  • 58
  • 2
    It is important to not forget the $ sign and only call it "event" in the template when wiring the event output. Everything else will give you an undefined variable. Could not find anything about this in the Docs... could not believe it.... – Florian Leitgeb Jan 03 '19 at 13:29
41

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>
Igor Janković
  • 5,494
  • 6
  • 32
  • 46
10

I couldn't get the answer "onSelect" going with the latest angular material (2.0.0-beta.3). It was never called.

I'm finding now that it is:

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

In other words it seems to be called onSelectionChange now. The docs still seem vague and continue to say "Stream of autocomplete option selections" which doesn't really mean anything.

See Franceso's answer also, however for most situations you will need to pass in $event to check the event information.

PeterS
  • 2,818
  • 23
  • 36
  • @PeterS I switched to the latest version and now onSelectionChange is fired twice if I choose a new element. Does it happen to you as well? I created a SO question with details: http://stackoverflow.com/questions/44056913/md-autocomplete-onselectionchange-fired-twice – Francesco May 18 '17 at 20:10
  • @Francesco This is a known bug: https://github.com/angular/material2/issues/4356 It did not get merged into beta.5 due to a code conflict, I hope it is in beta.6, I don't know of any workaround, other than coding for two changes in very quick succession/checking the text in the input field. It's probably worth waiting for the fix. – PeterS May 19 '17 at 08:29
  • This example should have been on Angular Material website. Its just sloppy documentation.Thanks !!! – Raheel Shah Feb 04 '19 at 15:29
7

The onSelectionChange event replaced the selected event. Now it's possible to recognize when the item is selected or deselected.

It's needed to pass an $event parameter to the target method to differentiate between the two cases, otherwise md-autocomplete will invoke the method twice (once with the new selected item and once with the deselected/previous value).
It would be nice though if the documentation would be a bit more clear about these changes.

Below how to get only the "on select" event:

Template

<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);
    }
}
Francesco
  • 9,947
  • 7
  • 67
  • 110
  • I don't get the any event triggered when the option is deselected. I am using mat-aoutocomplete and onSelectionChange in the same way as your example. Any ideas why? – tif Nov 21 '19 at 09:48
  • The code sample uses an old version of Angular material. Now you should use instead of . Otherwise the code should still be valid. Maybe you can create a new question for it with your code, so I can better help you. Just write me here then the URL. – Francesco Nov 21 '19 at 10:56