onselected event in md-select in Angular 4

Question

I would like call a function in typescript on choosing a value using md-select. What is the property used for this purpose in material design ?

   <md-select placeholder="State">
       <md-option *ngFor="let state of states" [value]="state.code">{{ state.name }}
   </md-option>

FAISAL · Accepted Answer · 2019-07-17T08:43:46.183

199

For Material version >= 6

Use the (selectionChange) event on mat-select.

<mat-form-field>
    <mat-select placeholder="State" (selectionChange)="someMethod($event.value)">
        <mat-option *ngFor="let state of states" [value]="state.value">
            {{ state.viewValue }}
        </mat-option>
    </mat-select>
</mat-form-field>

In the event method, $event.value contains the currently selected [value]. Reference to the official documentation.

@Output() selectionChange: EventEmitter< MatSelectChange >

Event emitted when the selected value has been changed by the user.

Here is a link to Stackblitz Demo.

For Material version < 6

Use the (change) output event.

<md-select placeholder="State" (change)="someMethod()">
  <md-option *ngFor="let state of states" [value]="state.value">
    {{ state.viewValue }}
  </md-option>
</md-select>

Another way is to use (onSelectionChange) event on <md-option>:

<md-select placeholder="State">
  <md-option *ngFor="let state of states" [value]="state.code" 
             (onSelectionChange)="anotherMethod($event, state)">
    {{ state.name }}
  </md-option>
</md-select>

Link to Stackblitz Demo.

edited Jul 17 '19 at 08:43

answered Sep 04 '17 at 12:34

FAISAL

33,618
10
97
105

3

(change) has been renamed to (selectionChange) – adnan kamili May 19 '18 at 10:58
We can also modify the first option like `(change)="someMethod($event)"` and then in code we can retrieve the selected value like `$event.value`. – developer May 27 '18 at 07:17
4

with every version syntax is changing. its no longer funny – Monish Sen Jun 20 '18 at 19:17
I ended up needing to use `(selectionChange)="someMethod($event)"` – checketts Jul 11 '18 at 20:06
@checketts, I have updated the answer accordingly. :) – FAISAL Jul 12 '18 at 08:46
Where is written, that you need to use the variable with the $ prefix? Can not find it anywhere in the documentation... – Florian Leitgeb Oct 03 '18 at 10:15
What if you want to fire event only when some values were selected and md-select was closed? – Augustas Jan 19 '19 at 13:51
What if i want to pass value instead of ($event)? Shall i use #value for that purpose? – Samavi Nov 24 '20 at 12:21
@Samavi you can pass `$event.value` in that case – FAISAL Nov 24 '20 at 12:31
I am really grateful for your response. By ($event) i mean i have method getInstructorbyCourse(CourseId : number) and in mat-select i am using #course will i pass course.value? – Samavi Nov 24 '20 at 12:37
@Samavi you don't have to use `course.value`. See the first code sample in the answer. You can wither set `[value]="course"` or `[value]="course.courseId"` and depending on that, your event on `mat-select` will look like `(selectionChnage)="getInstructorbyCourse($event.value.courseId)"` or `(selectionChange)="getInstructorbyCourse($event.value)"` – FAISAL Nov 24 '20 at 12:50

score 6 · Answer 2 · edited Nov 25 '20 at 15:39

Just adding on for people using latest version of material and searching for the solution, change md to mat in the answer suggested by @Faisal.

<mat-select placeholder="State" (change)="someMethod()">
  <mat-option *ngFor="let state of states" [value]="state.value">
    {{ state.viewValue }}
  </mat-option>
</mat-select>

for material version greater than 6 use (selectionChange) instead of change

score 6 · Answer 3 · answered Sep 30 '18 at 23:22

6

Alternatively you can just use the (click) event on mat-option. The click event is also fired when an already selected option is selected again. (change) or (selectionChange) will not fire in such a case.

answered Sep 30 '18 at 23:22

Maurice

6,698
9
47
104

2

For future readers, it is preferred not to use `(click)` at dropdowns because dropdowns can be navigated from buttons too. (For example down and up buttons). In these cases, the `(click)` event won't be fired. That means your handler won't be called. Using `click` events on dropdown is also a big accessibility anti-pattern. – Pramesh Bajracharya Dec 25 '19 at 12:22

score 2 · Answer 4 · answered Jun 17 '20 at 16:14

Try this,

html

<mat-label>Select a Category</mat-label>
<mat-select formControlName="category" name="category 
         (selectionChange)="onChangeCategory($event)">
    <mat-option *ngFor="let category of categories" [value]="category.value">
            {{category.viewValue}}
    </mat-option>
</mat-select>

Typescript

onChangeCategory(event) {
    console.log(event.value);
}

onselected event in md-select in Angular 4

4 Answers4

Linked