How to add color block on mat-select value?

I am using mat-select in my Angular project to display dropdown values. The dropdown options include three values: shiftCode, shiftStartTime, and shiftEndTime. These values are combined and displayed in the dropdown list. However, after a selection is made, I want to display only the shiftCode in the placeholder along with a color block that corresponds to a colorAssigned variable from the dropdown option.

Here is my current code:

<ng-container>
<span
class="font-weight-bold"
[style.color]="this.calendarGrid[j][p].disable ? '#cbcccb' : null">
{{ this.calendarGrid[j][p].date }}
</span>
<mat-select
[(value)]="this.calendarGrid[j][p].dropdownValue"
(openedChange)="onDropdownToggle($event)"
[pTooltip]="tooltipContent"
tooltipPosition="bottom"
[panelClass]="'custom-select-panel'"
class="mat-select-custom-width-dropdown"
(selectionChange)="onGridSelectionChange($event, j, p)"
[disabled]="this.calendarGrid[j][p].disable"
[ngClass]="this.calendarGrid[j][p].disable ? 'search_select-week' : ''"
class="search_select_shift custom_placeholder w-100"
placeholder="Select">

<div class="mat_search">
<div class="search-icon">
<input type="text" name="filter-options" class="input_search" placeholder="Type...">
<img src="assets/img/search-icon.svg" alt="search-icon">
</div>
<mat-option [value]="">Select</mat-option>
<mat-option [value]="'A'">Weekly Off</mat-option>
<mat-option *ngFor="let option of shiftDropDownList" [value]="option.shiftCode" class="d-flex align-items-center">
{{ option.shiftCode + ' | ' + option.shiftStartTime + '-' + option.shiftEndTime }}
</mat-option>
</div>
</mat-select>
</ng-container>



In this particular code I am using mat-select in which i am showing the dropdown values , the dropdown value contains three values (shiftCode ,shiftStartTime,shiftEndTime) which is showing combined in the dropdown list but after the selection I want to show just only shiftCode with the color assigned on the block as shown in image.

Here In the dropdown array, I have a colorAssigned variable in the option (which i can be used like option.colorAssigned that gives result '#fff')

Continue reading...