I am looking to enhance the background color of the selected value when it is clicked. Unlike the example I found, which highlights multiple select values, I only want to highlight the selected value when choosing an option.
Check out this example for reference.
<hello name="{{ name }}"></hello>
<p>
Default selection is Area 3. The array displayed below updates as options are chosen or deselected.
</p>
<div>
Selected: {{ selectedOptions | json }}
</div>
<mat-selection-list #list [(ngModel)]="selectedOptions" (ngModelChange)="onNgModelChange($event)">
<mat-list-option *ngFor="let tta of taskTypeAreas" [value]="tta.name">
{{tta.name}}
</mat-list-option>
</mat-selection-list>
app.css
p {
font-family: Lato;
}
mat-list-option {
margin: 10px;
}
mat-list-option[aria-selected="true"] {
background: rgba(0, 139, 139, 0.7);
}