Angular mat-option with multiple values and show only one value when mat-option selected

Question

Let's say I have this static object

allAccount = [
    { name: 'All Accounts', amount: 140853.47},
    { name: 'Credit Card ',amount: '-455.15' },
];

and I have mat-option interface with two values, name and amount.

   <mat-form-field>
      <mat-select>
        <mat-option *ngFor="let item of allAccount" [value]="item.name">
          <div class="flex justify-between">
            <span>
              {{ item.name }}
            </span>
            <span>
              {{ item.amount }}
            </span>
          </div>
        </mat-option>
      </mat-select>
    </mat-form-field>

This is within a mat-select, and once the user selects a choice, It display both item.name and item.amount in concatenated form, but [value]="item.name". How can I only show item.name when the user selects a choice in this case?

Answer 1

You can do the following:

<h4>mat-select</h4>

<mat-select placeholder="State" required #select>
  <mat-select-trigger> {{ select.value?.name }} </mat-select-trigger>
  <mat-option *ngFor="let val of states" [value]="val">{{val.name }} : {{ val.amount}}</mat-option>
</mat-select>

Please find the Working stackblitz here