1

i want to pass a dynamic object to mat-select component and also pass the input key of object , that should be used in [value] by mat-option. here mat-select 

<mat-select [placeholder]="field.label" [formControlName]="field.name">
<mat-option *ngFor="let item of field.options" [value]="item">{{item}}</mat-option>
</mat-select>

in place of item it should be dynamically object key .e.g if i pass this array like to iterate

[{name:'hassa',id:1}]

for loop and i want to pass id as use in [value]="item" in mat-option but it should be dynamic object can be changed

Hassan Amjad
  • 399
  • 1
  • 6
  • 20

2 Answers2

1

A bit late, but you can use the keyvalue pipe -similar to this answer: https://stackoverflow.com/a/51491848/1029688

<mat-select formControlName="example">
    <mat-option *ngFor="let item of testObject | keyvalue" [value]="item.key">
        Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
    </mat-option>
</mat-select>
Wet Noodles
  • 755
  • 7
  • 15
0

you can use some like

//in .ts
key="id"
text="name"

<mat-option *ngFor="let item of field.options" 
      [value]="item[key]">
   {{item[text]}}
</mat-option>

If you want to make a custom component to mannage a list of check box, take a look to this SO question

Eliseo
  • 50,109
  • 4
  • 29
  • 67