title: How to provide placeholder in mat-select
body: <p>I need to display a special string "No values selected" if the user has not selected a value (or cleared selection) in a <code>mat-select</code>.</p>
  
  <p>I wanted to use the <code>placeholder</code> attribute, as can be seen in the <a href="https://material.angular.io/components/select/overview" rel="nofollow noreferrer">documentation</a>.</p>
  
  <pre><code>&lt;h4&gt;Basic mat-select&lt;/h4&gt;
  &lt;mat-form-field&gt;
    &lt;mat-label&gt;Favorite food&lt;/mat-label&gt;
    &lt;mat-select placeholder="No value selected"&gt;  &lt;!-- this is not showing--&gt;
      &lt;mat-option *ngFor="let food of foods" [value]="food.value"&gt;
        {{food.viewValue}}
      &lt;/mat-option&gt;
    &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>However, if I apply the attribute, the placeholder is <strong>overwritten by the label, which I do not want to.</strong> </p>
  
  <p><a href="https://i.stack.imgur.com/vfpYV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vfpYV.png" alt="screenshot of the label replacing placeholder string"></a></p>
  
  <p>Stackblitz example: <a href="https://stackblitz.com/edit/angular-qlpnim-vyfruq" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-qlpnim-vyfruq</a> </p>
  
  <p>I have tried to replace it with attribute binding, no luck with that. I still need the <code>&lt;mat-label&gt;</code> so it can be visually similar to other form fields in the form. </p>