CODEWITHSUNDEEP
angularangular-material
Jeff Voss
Jeff Voss

Reputation: 3695

Angular 2 Material Select open with button

I have a select dropdown that I want to open with a button click, there is no mention of this anywhere in the docs - I have tried using an element reference and using select.open() on the element but it doesn't work. Has anyone else run into this issue?

<button ngClass="menu-filter-item-button" type="button" mat-button (click)="select.open()">
    <strong class="menu-filter-item-title">{{filter.name}}</strong>
    <mat-icon>keyboard_arrow_down</mat-icon>
</button>
<mat-select #select multiple (change)="onSubmit($event)" [compareWith]="compareById" [(ngModel)]="filter.value">
    <mat-option *ngFor="let value of filter.default" [value]="value">
        {{value}}
    </mat-option>
</mat-select>

Upvotes: 10

Views: 28644

Answers (5)

DCHH
DCHH

Reputation: 41

Use mat menu instead of mat-select

<button mat-mini-fab color="primary"[matMenuTriggerFor]="matmenu">
    <small>{{model.code}}</small>
</button>
<mat-menu #matmenu="matMenu">
    <button mat-menu-item *ngFor="let item of options" (click)="this.model= item;">
        <span>{{item.name}}</span>
    </button>
</mat-menu>

Upvotes: 4

Night Train
Night Train

Reputation: 2576

I had the same problem and this dirty hack solved it without displaying the mat-select itself:

HTML: 

<button
  mat-icon-button
  matTooltip="Language"
  (click)=select.open()>

  <mat-icon>language</mat-icon>

  <mat-select
    #select
    [(ngModel)]="setLang"
    class="langSelect">
    <mat-option (click)="changeLang()" value="en">English</mat-option>
    <mat-option (click)="changeLang()" value="de">Deutsch</mat-option>
  </mat-select>

</button>

CSS: 

::ng-deep .langSelect div.mat-select-arrow-wrapper {
  display: none;
}

::ng-deep .langSelect.mat-select {
  display: inline;
}

In my project it looks better than on StackBlitz, but anyway here is a link to this code on StackBlitz.

If you want to to simply have an additional button that opens the mat-select too this will work for you (no css needed):

<button mat-icon-button matTooltip="Language" (click)=select.open()>
  <mat-icon>language</mat-icon>
  <mat-select #select [(ngModel)]="setLang">
    <mat-option (click)="changeLang()" value="en">English</mat-option>
    <mat-option (click)="changeLang()" value="de">Deutsch</mat-option>
  </mat-select>
</button>

Upvotes: 18

Gaurav Joshi
Gaurav Joshi

Reputation: 19

I had same issue. Basically angular material mat-select adds and overlay i.e. cdk-overlay-pane which is at z-index at 1000. Add the z-index to you button so that button will recognize the click event and close the dropdown.

Also if there is any requirement of the multiple dropdowns to be opened/closed, mat-select is bad choice to go for. I have spent week in understanding how this works to ultimately write my own component.

If open action is not working, verify if you already have any overlay or button is able to grasp the event.

Upvotes: 2

Amir Azizkhani
Amir Azizkhani

Reputation: 1804

in my sample, i need multi select in toolbar that open with button. you can use like this:

HTML: 

<button mat-button (click)="mySelect.open()"
        matTooltip="Borders">
  <i class="material-icons">rounded_corner</i>
</button>

<mat-select style="visibility:hidden;width: 0"
            #mySelect
            [formControl]="bordersControl"
            multiple>
  <mat-option value="LEFT_BORDER">LEFT_BORDER</mat-option>
  <mat-option value="TOP_BORDER">TOP_BORDER</mat-option>
  <mat-option value="BOTTOM_BORDER">BOTTOM_BORDER</mat-option>
  <mat-option value="RIGHT_BORDER">RIGHT_BORDER</mat-option>
</mat-select>

TS:

bordersControl = new FormControl();

Upvotes: 2

Mateo Tibaquira
Mateo Tibaquira

Reputation: 2136

Seems that you cannot try to manipulate the #element from a parent, to make it work I had to go the long way through the component:

@ViewChild(MatSelect) mySelector: MatSelect;

openSelector() {
    this.mySelector.open();
}

and then you can place the click event on any element in your template:

<div (click)="openSelector()">

Enjoy!

Upvotes: 3

Related Questions