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.