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

Answer 1

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

  
    Option 1
    Option 2 (disabled)
    Option 3
  
  

CSS code:

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

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