I am using Angular Materials in a project and I am trying to do some dynamic styling of a mat-select form control to fulfill a requirement.
I want to override the default colors on some of the selector elements and also change these to another color when a selection has been confirmed (see picture below). I have got it partially working, but I do not know if it is the best approach. I am using the ::ng-deep selector to get to the applicable DOM elements (pieced together from some examples I found online). It works and I am able to apply custom style to the elements. I know the ::ng-deep selector i deprecated, but not sure how to do this otherwise.
To do the color change I have wrapped the form field in a container where I use ngClass with a conditional statement to override the "default" colors. The problem with doing this is that the custom styles for the .mat-select-panel element is no longer working.
Any input on how to get this working, and perhaps a better approach than using the ::ng-deep selector is greatly appreshiated.
.ts
<div class="table-select-selection"
[ngClass]="{'table-select-selection-success': (!selectingTable && selectionSuccessful)}"
>
<h3 class="mat-subheading-2">Select Sheet</h3>
<mat-form-field appearance="standard">
<mat-label>Worksheets</mat-label>
<mat-select panelClass="dialog-selection-box" [(ngModel)]="tableName" (ngModelChange)="onTableChange()">
<mat-option *ngFor="let table of tableNames" [value]="table">
{{ table }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
.scss
.table-select {
&-selection {
::ng-deep {
$details-color: rgb(168, 168, 168);
.mat-form-field-infix {
font-size: 16px;
padding-left: 5px !important;
}
.mat-select-arrow {
color: $details-color !important;
}
.mat-select-panel {
.mat-option[aria-selected="true"] {
color: $details-color !important;
}
.mat-option-text:hover {
font-weight: bold !important;
}
}
.mat-form-field {
width: 100%;
.mat-input-element {
color: $details-color !important;
}
.mat-form-field-label {
color: $details-color !important;
margin: 5px;
}
.mat-form-field-underline {
background-color: $details-color !important;
}
.mat-form-field-ripple {
background-color: $details-color !important;
}
}
}
&-success {
::ng-deep {
$details-color: green;
.mat-form-field-infix {
background-color: rgba(0, 128, 0, 0.25);
}
.mat-select-arrow {
color: $details-color !important;
}
.mat-form-field {
.mat-input-element {
color: $details-color !important;
}
.mat-form-field-label {
color: $details-color !important;
}
.mat-form-field-underline {
background-color: $details-color !important;
}
.mat-form-field-ripple {
background-color: $details-color !important;
}
}
}
}
}