2
votes

Using Angular Materials, we're trying to achieve something related the Bootstrap button with dropdowns component - i.e. https://getbootstrap.com/docs/4.0/components/input-group/#buttons-with-dropdowns

More specifically, it's a search Input Field combined with a dropdown of search options. It looks like this in the wire frame:

Input with dropdown indicator

i.e. when you click on the white down arrow

Dropdown

This is what they came up with using just the `Material select'; however, the question really is : can it be done where an input field is combined with a dropdown ?

.search-form {
    min-width: 150px;
    max-width: 500px;
    width: 100%;
    padding-left:10px;
    padding-right:10px;
    overflow-y:auto;
  }
  
.search-full-width {
width: 100%;
}

:host ::ng-deep .mat-tab-body-content{
  min-height:500px;
  padding:5px;
}
.pad-left {
  margin-left: 5px; 
}
.mat-select-panel {
  background-color: blue;
}
<mat-form-field appearance="outline" class="search-full-width">
    <mat-select panelClass="mat-select-panel" [(value)]="selected"  disableOptionCentering=true> 
          <mat-option value="Basic">Basic</mat-option>
          <mat-option value="Advanced">Advanced</mat-option>
    </mat-select>
    <mat-icon matSuffix>search</mat-icon>
</mat-form-field>

Here's something to get started (it contains a select) -

https://stackblitz.com/edit/angular-mat-select-drpdwn

1

1 Answers

0
votes

Using a combination of boostrap 4 and mat-select, I'm getting something I want. It just needs to be styled properly.

<div class="input-group" style="margin: 15px 0 0 10px !important; ">
    <input type="text" id="basic_filter" #basicFilter placeholder="Search" class="form-control" value="{{searchOptions?.filter}}">
    <div class="input-group-append">
        <mat-select [(value)]="selected" class="pat-search" disableOptionCentering=true> 
            <mat-option value="Basic">Basic</mat-option>
            <mat-option value="Advanced">Advanced</mat-option>
        </mat-select>        
    </div>
    <mat-icon class="search-icon" matSuffix>arrow</mat-icon>
</div>