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')

You can use ng-template with the mat-select component to define how the selected value will be displayed. This allows you to show the shiftCode along with a color block (using colorAssigned).

<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>

      <!-- Options in the dropdown -->
      <mat-option *ngFor="let option of shiftDropDownList" [value]="option" class="d-flex align-items-center">
        {{ option.shiftCode + ' | ' + option.shiftStartTime + '-' + option.shiftEndTime }}
      </mat-option>
    </div>

    <!-- Customize selected value -->
    <ng-template matSelectTrigger>
      <div class="d-flex align-items-center">
        <div 
          class="color-block" 
          [style.background-color]="calendarGrid[j][p].dropdownValue?.colorAssigned || '#000000'" 
          style="width: 16px; height: 16px; border-radius: 2px; margin-right: 8px;">
        </div>
        <span>{{ calendarGrid[j][p].dropdownValue?.shiftCode || 'Select' }}</span>
      </div>
    </ng-template>
  </mat-select>
</ng-container>