0
votes

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.

enter image description here

Demo

2
can you link the stackblitz?Moshezauros
Yes I modified my question and you can find the link thereamin mohammadi
so if user select the first value you want to show "FFFFFF" in select box?Vimal Patel
No, I need to show the color itself instead of labelamin mohammadi
so Just like in dropdown we can see color only same behavior after selection, Correct?Vimal Patel

2 Answers

3
votes

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

0
votes

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 - e.g. {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>