Is it possible to add custom buttons to mat select dropdown?

4
votes

Is it possible to add custom buttons (Ok and Cancel) like the photo below so that in a multi-select mat dropdown the user doesnt have to click outside the box to close the dropdown?

I didnt see this in the angular documentation

<h4>Basic native select</h4>
<mat-form-field>
  <mat-label>Cars</mat-label>
  <select matNativeControl required>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</mat-form-field>

here is the stackblitz of what I have so far https://stackblitz.com/edit/select-all-option-angular-material?file=src%2Fapp%2Fapp.component.html

2
htmlcssangular
Is it possible to share demo link? – Hardi Shah
added the stackblitz – Terrance Jackson
something like this ? https://stackblitz.com/edit/select-all-option-angular-material-6aexy8 You need to handle events in this case – Supun De Silva
Yea that would work. Can you post this as an answer so you can get the bounty? – CodeMan03
Added a version with basic event handling as well. Check if that suits you – Supun De Silva

2 Answers

2
votes

You could make a 'fixed' footer by doing something like this:

<mat-form-field>
    <mat-label>Select an option</mat-label>
    <mat-select [(value)]="selected">
        <div class="custom-panel">
            <mat-option>None</mat-option>
            <mat-option value="option1">Option 1</mat-option>
            <mat-option value="option2">Option 2</mat-option>
            <mat-option value="option3">Option 3</mat-option>
        </div>
        <footer>
            <button mat-raised-button>Ok</button>
            <button mat-button>Cancel</button>
        </footer>
    </mat-select>
</mat-form-field>

and the css: 

// This one must be in the global style (or ng-deep but it's deprecated :( )
.mat-select-panel{
  overflow: hidden !important;
}

footer{
  border-top:2px solid gray; 
  height: 44px;
  padding-top: 10px;
  text-align:right;
}

.custom-panel {
  max-height: 200px; // mat-select-panel height = 256px. 200 + 10 + 44 + 2
  overflow: auto;
}

Here is the repro on stackblitz

Try adding more options to see that the scrolling does not affect your button.

It also works like a charm on your stackblitz. I just changed 'footer' by a div with a class.