How to Style Angular Material Select




Asked on May 15, 2024
How can I use CSS classes in Angular Material Select? I have a following HTML code.

<mat-form-field>
  <mat-label>Select Item</mat-label>
  <mat-select [formControl]="item">
    <mat-option value="Item1">Item1</mat-option>
    <mat-option value="Item2">Item2</mat-option>
    <mat-option value="Item3">Item3</mat-option>
  </mat-select>
</mat-form-field>






Replied on May 15, 2024
Use .mat-mdc-select-panel class of <mat-select> with its panelClass property to change default style.

styles.css

.item-select.mat-mdc-select-panel {
  background: aqua;
  height: 200px;
}

HTML

<mat-form-field>
  <mat-label>Select Item</mat-label>
  <mat-select [formControl]="item" panelClass="item-select">
    -------
  </mat-select>
</mat-form-field>




Replied on May 15, 2024
Thanks for help. Its working.

Write Answer












©2024 concretepage.com | Privacy Policy | Contact Us