Angular 2 material mat-select programmatically open/close

Question

Does any one know how to programmatically open or close mat-select? As pert the api there are methods for open and close but don't know how to call those methods from component and there isn't any example showing that on site.

Thanks

Answer 1

In order to access these properties you need to identify the DOM element and access it with a ViewChild:

component.html

  <mat-select #mySelect placeholder="Favorite food">
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{ food.viewValue }}
    </mat-option>
  </mat-select>

component.ts

import {Component, ViewChild} from '@angular/core';

@Component({
  selector: 'select-overview-example',
  templateUrl: 'select-overview-example.html',
  styleUrls: ['select-overview-example.css'],
})
export class SelectOverviewExample {
  @ViewChild('mySelect') mySelect;
  foods = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'}
  ];

  click() {
    this.mySelect.open();
  }
}

View a working stackblitz here.

Answer 2

Another approach, so as not to so tightly couple the material component to your typescript code would be to handle this all on the HTML side.

<mat-form-field>
  <mat-select #mySelect placeholder="Favorite food">
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{ food.viewValue }}
    </mat-option>
  </mat-select>
</mat-form-field>
<br/>
<button (click)="mySelect.toggle()">click</button>

I used toggle() on the "selected" answer to both open or close the panel, although you can substitute open() or close() calls depending on your needs.

The key piece seems to be that template variable (#mySelect) that I learned thanks to the answer that @zbagley provided. I just kept tinkering to make it work without the tight binding of a @ViewChild.

Cheers, Dan