CODEWITHSUNDEEP
angularangular-material2md-select
Bhavesh
Bhavesh

Reputation: 1071

Angular 2 material mat-select programmatically open/close

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

Upvotes: 27

Views: 49963

Answers (4)

Liraz Shaka Amir
Liraz Shaka Amir

Reputation: 649

In the .html file you need to add the anchor to the mat-select element:

<mat-select #dropdownAnchor></mat-select>

And in the .ts file add this:

@ViewChild('dropdownAnchor', {static: false}) dropdownAnchor: MatSelect;

openDropdown(): void {
  this.dropdownAnchor.open();
}

Upvotes: 0

Sam Berry
Sam Berry

Reputation: 7844

Using Angular 13 and Angular Material 13, I had to click the "trigger" element for the select.

this.mySelect.trigger.nativeElement.click();

(Same configuration below as other answers)

In component:

@ViewChild("mySelect") mySelect;

In template:

<mat-select #mySelect ...

Upvotes: 0

Z. Bagley
Z. Bagley

Reputation: 9260

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.

Upvotes: 48

djmarquette
djmarquette

Reputation: 812

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

Upvotes: 12

Related Questions