mat-select: Angular mat-option multiple values

[henafufa]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I have object looks like this

allTransactionAccount = [
{ form_name: 'All Accounts', net_value: -145017687853.47995, vault_user_form_id: 0 },
{ form_name: 'Credit Card 363636363', vault_user_form_id: 18215, net_value: '-455.15' },
];

    <mat-form-field>
      <mat-select>
        <mat-option *ngFor="let account of allTransactionAccount" [value]="account.form_name">
          <div class="flex justify-between">
            <span>
              {{ account.form_name | truncateStrPipe : 25 }}
            </span>
            <span>
              {{ account.net_value | currency : 'USD' : true : '1.0-2' }}
            </span>
          </div>
        </mat-option>
      </mat-select>
    </mat-form-field>

As you see I set the value to account.form_name
I wanted to be only the form_name will be displayed when option item get selected
but I am getting like both form_name and net_value like this
All Accounts - -145017687853.47995

I circled it with red

Reproduction

StackBlitz link:
Steps to reproduce:
1.
2.

Expected Behavior

I wanted to be only the form name get populated as value to mat-select, and I wanted the net value to only show it the drop down.

When mat-option list selected I want form-name to get populated as it shown on picture

Actual Behavior

Environment

• Angular:
• CDK/Material:
• Browser(s):
• Operating System (e.g. Windows, macOS, Ubuntu):

[henafufa]

Anything you can offer would be greatly appreciated, thanks!

[mikhail-filin]

This is not a bug but a question, better to ask it on StackOverflow.
However, you can customize the trigger/header with mat-select-trigger if I understand your problem correctly.

[henafufa]

Yeah you are right Yes I get it with mat-select-trigger Thanks, close for now, I will remove it

…

On Sun, Jul 9, 2023, 6:21 AM Mikhail Filin ***@***.***> wrote: This is not a bug but a question, better to ask it on StackOverflow. However, you can customize the trigger/header with mat-select-trigger <https://material.angular.io/components/select/overview#customizing-the-trigger-label> if I understand your problem correctly. — Reply to this email directly, view it on GitHub <#27421 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AI7TSJJXCZJ7OLH27CP2ULTXPIPVNANCNFSM6AAAAAA2CPISYE> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}