Style material Mat-option mat-select

Asked Nov 21 '17 at 21:17

Active Nov 21 '17 at 23:36

Viewed 4,942 times

I have following code:

<mat-form-field>
  <mat-select placeholder="Favorite food">
   <mat-option *ngFor="let name of names" [value]="name.value">
     {{ name.value }}
    </mat-option>
    </mat-select>
  </mat-form-field>

My name value may include several contiguous spaces, for example, 3xxx4xxxxName, where x denotes a space. Default behaviors would strip all spaces except one space. The name value will be displayed as 3x4xname. Is there a way style the name? I think I need to use

white-space:pre-wrap

However, I do not know where to put the class to make it work. Any help is welcome. After I added the scss file.

.mat-option {
  white-space:pre;
 }

The combobox stops working.

edited Nov 21 '17 at 23:36

asked Nov 21 '17 at 21:17

user3097695

1,152
2
16
42

view-source:(your url) and show what's rendered that you can easily select the specific dom element – Marouen Mhiri Nov 21 '17 at 22:36
I did find .mat-option is the class. However, the combbox stops working when I added class. – user3097695 Nov 21 '17 at 23:38
It will be great if you provide a fiddle for your issue – Marouen Mhiri Nov 27 '17 at 14:27
check this : https://stackoverflow.com/questions/46766597/styling-mat-select-in-angular-material – hakuna Apr 12 '18 at 15:34

Style material Mat-option mat-select

0 Answers0