Angular材料； mat-select 显示选择的颜色

Question

I have this piece of code to display list of colors that could be chosen by user:

<form>
    <h4>mat-select</h4>
    <mat-form-field appearance="fill">
        <mat-label>Favorite Color</mat-label>
        <mat-select [(ngModel)]="selectedValue" name="food">
            <mat-option *ngFor="let color of allColors" [value]="'#' + color.value">
                <!-- {{color.label}}  -->
                <span class="color-span" [ngStyle]="{ 'background-color': '#' + color.value }"></span>
            </mat-option>
        </mat-select>
    </mat-form-field>

</form>

import {Component} from '@angular/core';
/**
 * @title Select in a form
 */
@Component({
  selector: 'select-form-example',
  templateUrl: 'select-form-example.html',
})
export class SelectFormExample {
  public allColors: any[] = [
  {label: 'FFFFFF', value: 'FFFFFF'},
  {label: '000000', value: '000000'},
  {label: '603813', value: '603813'},
  {label: 'FF0000', value: 'FF0000'},
  {label: '2E3192', value: '2E3192'},

  {label: '006837', value: 'FFD400'},
  {label: 'F15A24', value: 'F15A24'},
  {label: 'CCCCCC', value: 'CCCCCC'},
  {label: 'DBC0B5', value: 'DBC0B5'},
  {label: 'FAB49B', value: 'FAB49B'},

  {label: '87B2C7', value: '87B2C7'},
  {label: 'ACD58A', value: 'ACD58A'},
  {label: 'FFF9AE', value: 'FFF9AE'}
];
}

It works as you see in the image below. But I don't know how to display selected color in the mat-select control.

Demo

Answer 1

If you want to customized the selected value their is a selector which you can use mat-select-trigger . It allows you to customize the trigger that is displayed when the select has a value.

Reference:- https://material.angular.io/components/select/api

You can modify your code like below to show the color when user select the value.

<mat-select [(ngModel)]="selectedValue" name="food">
    <mat-select-trigger>
        <span [ngStyle]="{ 'background-color': selectedValue }"/>
    </mat-select-trigger>
    <mat-option *ngFor="let color of allColors" [value]="'#' + color.value">
        <!-- {{color.label}}  -->
        <span class="color-span" [ngStyle]="{ 'background-color': '#' + color.value }"/>
    </mat-option>
</mat-select>

Demo

Answer 2

mat-select sets the value and displays the label of the mat-option you select, however, it will only show the text from that selection, since you are not showing any text in your labels, nothing is displayed when you select one of the options.

You can add the label for your color in the mat-option elements and then, once you select something, that text will appear in the mat-select element. If you want a visual representation of the color - you can show the value outside of the mat-select element (maybe to the right?).

You can also consider changing the label on your array from the hex value to the name of the color - eg {label: 'FFFFFF', value: 'FFFFFF'}, to {label: 'White', value: 'FFFFFF'},

Here is a snippet which shows a suggestion:

<mat-select [(ngModel)]="selectedValue" name="food">
    <mat-option *ngFor="let color of allColors" [value]="'#' + color.value">
        <!-- {{color.label}}  -->
        <span class="color-span" [ngStyle]="{ 'background-color': '#' + color.value }"></span>
        {{ color.label }}
    </mat-option>
</mat-select>