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

Question

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

Answer 1

Here is a version with basic event handling as well

https://stackblitz.com/edit/select-all-option-angular-material-uvu3eb

Answer 2

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.