-1

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?

Hena fufa
  • 59
  • 3
  • Have you read the docs? – Vega Jul 08 '23 at 08:02
  • solved with Not exactly the same problem, but I got the idea of mat-select-trigger from, https://stackblitz.com/angular/qkjbojyxebly?file=app%2Fselect-custom-trigger-example.html – Hena fufa Jul 18 '23 at 07:38
  • 1
    No, the exact solution. Duplicates have the same solution. Anyway, the docs are very helpful and it was explained in the docs. Please do a more research before posting – Vega Jul 18 '23 at 07:43
  • I just saw that this issue was duplicated, and also this issue is closed, I didn't notice that before should I delete the question? – Hena fufa Jul 18 '23 at 08:01

1 Answers1

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

Selaka Nanayakkara
  • 3,296
  • 1
  • 22
  • 42