0

In my application i have a material2 select dropdown widget with few options.

app.component.html

<md-select placeholder="Choose an option" [(ngModel)]="myOption" 
           (optionSelectionChanges)="setOptionValue(myOption)">
  <md-option value="value1"> Option-1 </md-option>
...
</md-select>

I'm trying to call 'setOptionValue()' whenever the option value changes.

./app.component.ts

..
myOption: string;
constructor(..){
   this.myOption = 'value1'; 
}
setOptionValue(option: any) {
    console.log(option)
}

There are no official documentation on how to use optionSelectionChanges property.

FAISAL
  • 33,618
  • 10
  • 97
  • 105
mperle
  • 3,342
  • 8
  • 20
  • 34
  • They really lack documentation. See this answer to understand how to use `optionSelectionChanges` : https://stackoverflow.com/a/45730922/1791913 – FAISAL Aug 23 '17 at 09:36
  • thank you for your answer. i get `Unable to get property 'setFirstItemActive' of undefined or null reference` when i select the dropdown. what could be the possible solution to this? This happens only in IE11 – mperle Aug 23 '17 at 11:35

1 Answers1

1

Here's a code snippet of what i do:

<md-select class="periodselect" [(ngModel)]="BTWPeriodMonths" (ngModelChange)="outBTWPeriod.emit(BTWPeriodMonths)" placeholder="BTW periode">
      <md-option [value]="1">
        1 maand
      </md-option>
      <md-option [value]="3">
        Kwartaal
      </md-option>
      <md-option [value]="12">
        Jaar
      </md-option>
    </md-select>

You can also use (optionSelectionChanges)="setOptionValue($event)" with $event

Carsten
  • 4,005
  • 21
  • 28