Mat-select default selected value not displaying image

Question

It seems the default selected value on my mat-select isn't displaying the image as it should.

Here is my dropdown, where the images are working properly:

Dropdown

But, as you could see, the "Pending" default selected value is not displaying the corresponding image to its left, for some reason.

Here is my.html:

<mat-form-field appearance="outline" floatLabel="always">
    <mat-label>Status</mat-label>
    <mat-select
        disableOptionCentering
        panelClass="panel"
        (openedChange)="openedChange($event)"
        [(value)]="selected"
    >
        <mat-option value="Pending" style="color: white;">
            <img src="../../../../assets/order-details/pending-dot.svg" style="margin-right: 0.489rem">
            Pending
            <mat-divider></mat-divider> 
        </mat-option>
        <mat-option value="Processed" style="color: white;">
            <img src="../../../../assets/order-details/processed-dot.svg" style="margin-right: 0.489rem">
            Processed
            <mat-divider></mat-divider> 
        </mat-option>
        <mat-option value="Finished" style="color: white;">
            <img src="../../../../assets/order-details/finished-dot.svg" style="margin-right: 0.489rem">
            Finished
            <mat-divider></mat-divider> 
        </mat-option>
        <mat-option value="Cancelled" style="color: white;">
            <img src="../../../../assets/order-details/cancelled-dot.svg" style="margin-right: 0.489rem">
            Cancelled
        </mat-option>
    </mat-select>
</mat-form-field>

And here is my.ts:

@Component({
    selector: 'app-order-channel',
    templateUrl: './order-channel.component.html',
    styleUrls: ['./order-channel.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class OrderChannelComponent implements OnInit {
    selected: string;
    triggerHideStatusMenu: boolean;
    triggerStatusMenuDropdown: boolean;

    ngOnInit(): void {
        this.selected = "Pending";
        this.triggerHideStatusMenu = true;
        this.triggerStatusMenuDropdown = false;
    }
    ...
}

What can I do to also display the image on the left of the default selected value?

Thank you in advance.

Answer 1

Found the solution here . In my case, I was missing the CSS classes and the connection [ngClass]="selected" inside the mat-select element. Once this was set, it was a matter of adjusting alignments and position to fit my needs (I wanted the image on the left, not on the right).

Here are the adjustments for the selected value:

.mat-select-value {
    color: white;
    position: relative;
    left: 21px;
}

And for adding the image (note that the class name must correspond to that of the value set in the mat-option elements):

.Pending {
    background: url("../../../../assets/order-details/pending-dot.svg") left / contain no-repeat;
    background-position: 0px 5px;
    background-size: 11px 11px;
}

Click here to view the final result.

UPDATE : See Ammar's answer for a cleaner solution.

Answer 2

I would not use css tricks when angular material gives the possibility to do that in typescript/tempating, so one would have more control over the logic, and it is easier to test.

so I would recommend using mat-select-trigger from the docs

MatSelectTrigger

Allows the user to customize the trigger that is displayed when the select has a value.

I have got a working example here, please have a look:
https://stackblitz.com/edit/angular-ynmbv5?file=src/app/form-field-overview-example.ts

and it looks like this:

Template:

<mat-form-field appearance="fill">
  <mat-select [(value)]="selected">
    <mat-select-trigger>
      <img width="16" src="{{ selected.icon }}" />
      {{ selected.name }}
    </mat-select-trigger>
    <mat-option *ngFor="let item of allItems" [value]="item">
      <img width="16" src="{{ item.icon }}" />
      {{item.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

Component.ts

import {Component} from '@angular/core';

interface Item {
  name: string;
  icon: string;
}

/** @title Simple form field */
@Component({
  selector: 'form-field-overview-example',
  templateUrl: 'form-field-overview-example.html',
  styleUrls: ['form-field-overview-example.css']
})
export class FormFieldOverviewExample {
  allItems :Item[] = [
    {
      name: "Pending",
      icon: "https://upload.wikimedia.org/wikipedia/commons/9/92/Location_dot_red.svg",
    },
    {
      name: "Processed",
      icon: "https://upload.wikimedia.org/wikipedia/commons/3/35/Location_dot_blue.svg",
    },
  ]
  selected = this.allItems[0];
}