title: How to make a 'mat-select' readonly?
body: <p>I am working on a angular 5 project. There are many <code>mat-select</code> elements which is supposed to be readonly like text boxes. I found out that there is a <code>disabled</code> feature which is: </p>
  
  <pre><code>  &lt;mat-form-field&gt;
      &lt;mat-select placeholder="Choose an option" [disabled]="disableSelect.value"&gt;
        &lt;mat-option value="option1"&gt;Option 1&lt;/mat-option&gt;
        &lt;mat-option value="option2" disabled&gt;Option 2 (disabled)&lt;/mat-option&gt;
        &lt;mat-option value="option3"&gt;Option 3&lt;/mat-option&gt;
      &lt;/mat-select&gt;
    &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>which out put looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/OA4ne.png" rel="noreferrer"><img src="https://i.stack.imgur.com/OA4ne.png" alt="enter image description here"></a></p>
  
  <p>It fades out the text and the lining below get changes, is it possible to make it readonly?</p>