Mat-select readonly

The mat-select readonly attribute is used to make a Material Select component non-editable or unselectable by the user. When the readonly attribute is applied, the user cannot open the dropdown list, select an item, or interact with the select control in any way. This can be useful when you want to display the selected value without allowing the user to change it.

Example:

Here’s an example of how to use the readonly attribute in a mat-select component:

      
         <mat-form-field>
            <mat-label>Favorite Fruit</mat-label>
            <mat-select readonly [value]="favoriteFruit">
               <mat-option value="apple">Apple</mat-option>
               <mat-option value="banana">Banana</mat-option>
               <mat-option value="orange">Orange</mat-option>
            </mat-select>
         </mat-form-field>
      
   

In the above example, the readonly attribute is added to the mat-select element. The [value] attribute is used to bind the selected value to a variable named favoriteFruit. Therefore, the mat-select element will display the value of the favoriteFruit variable, but the user will not be able to make any changes.