openedChange vs selectionChange in mat-select

Asked on May 15, 2024
What is difference between openedChange and selectionChange in Angular Material mat-select?

Replied on May 15, 2024
openedChange event emits when a user opens a panel or close it. It means to select an item from select dropdown, openedChange event will emit two times, one for opening panel and second for closing panel.

selectionChange event emits when a user selects a value.

Suppose I have a select dropdown using mat-select as below.
HTML code:

  <mat-label>Select Item</mat-label>
  <mat-select [formControl]="item"
    <mat-option value="a">A</mat-option>
    <mat-option value="b">B</mat-option>
    <mat-option value="c">C</mat-option>

TS code:

item = new FormControl('');
onOpenedChange() {
onSelectionChange() {

For openedChange event, onOpenedChange() method will execute.

For selectionChange event, onSelectionChange() method will execute.

If I select, item B from select dropdown, in console we will get output as below.


We observer that for selecting one item,  onOpenedChange() method executes two times whereas onSelectionChange() executes only one time.

Write Answer

©2024 | Privacy Policy | Contact Us