How to make a 'mat-select' readonly?

Question

I am working on a angular 5 project. There are many mat-select elements which is supposed to be readonly like text boxes. I found out that there is a disabled feature which is:

  <mat-form-field>
    <mat-select placeholder="Choose an option" [disabled]="disableSelect.value">
      <mat-option value="option1">Option 1</mat-option>
      <mat-option value="option2" disabled>Option 2 (disabled)</mat-option>
      <mat-option value="option3">Option 3</mat-option>
    </mat-select>
  </mat-form-field>

which out put looks like:

It fades out the text and the lining below get changes, is it possible to make it readonly?

Answer 1

Add CSS to both select block and mat-form-field block, these can be applied automatically to all the select elements:

<mat-form-field class="readonly-wrapper">
  <mat-select class="readonly-block" placeholder="Choose an option" [disabled]="disableSelect.value">
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2" disabled>Option 2 (disabled)</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>  

CSS code:

.readonly-wrapper {
    cursor: not-allowed;
}

.readonly-wrapper .readonly-block {
    pointer-events: none;
}

Answer 2

You can combine an editable select with a readonly textbox and ngIf between them:

  <mat-form-field>
    <mat-label>Choose an option</mat-label>
    <input *ngIf="!editing" mat-input formControlName="mySelect" [readonly]="true">
    <mat-select *ngIf="editing" formControlName="mySelect">
      <mat-option value="option1">Option 1</mat-option>
      <mat-option value="option2" disabled>Option 2 (disabled)</mat-option>
      <mat-option value="option3">Option 3</mat-option>
    </mat-select>
  </mat-form-field>

Answer 3

You can replace the mat-select form field with a input box and bind input box data with mat-select data.