How to make a 'mat-select' readonly? : <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>
