title: Angular Materials - dropdown within an input box
body: <p>Using Angular Materials, we're trying to achieve something related the Bootstrap <code>button with dropdowns</code> component - i.e. <a href="https://getbootstrap.com/docs/4.0/components/input-group/#buttons-with-dropdowns" rel="nofollow noreferrer">https://getbootstrap.com/docs/4.0/components/input-group/#buttons-with-dropdowns</a> </p>
  
  <p>More specifically, it's a search <code>Input Field</code> combined with a <code>dropdown</code> of search options. It looks like this in the wire frame:</p>
  
  <p><a href="https://i.stack.imgur.com/5BdLu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5BdLu.png" alt="Input with dropdown indicator"></a></p>
  
  <p>i.e. when you click on the white down arrow</p>
  
  <p><a href="https://i.stack.imgur.com/hBY6I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hBY6I.png" alt="Dropdown"></a></p>
  
  <p>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 ? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;mat-form-field appearance="outline" class="search-full-width"&gt;
      &lt;mat-select panelClass="mat-select-panel" [(value)]="selected"  disableOptionCentering=true&gt; 
            &lt;mat-option value="Basic"&gt;Basic&lt;/mat-option&gt;
            &lt;mat-option value="Advanced"&gt;Advanced&lt;/mat-option&gt;
      &lt;/mat-select&gt;
      &lt;mat-icon matSuffix&gt;search&lt;/mat-icon&gt;
  &lt;/mat-form-field&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's something to get started (it contains a select) - </p>
  
  <p><a href="https://stackblitz.com/edit/angular-mat-select-drpdwn" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-mat-select-drpdwn</a> </p>