Under my Angular 7 app , i'm using the mat-select ponent :

<mat-form-field  class="col-md-3" color="warn">
     <mat-select placeholder="Selectionner le code Edo"
                  id="codeEdo"
                  [(value)]="selectedCodeEdoValue"
                  ngDefaultControl
                  formControlName="codeEdo">
     <mat-option (onSelectionChange)="onEdoSelectionChanged(edo )"
                 *ngFor="let edo of shopsList"
                  [value]="edo.edoId">
                  {{edo.edoId}}
     </mat-option>
     </mat-select>
</mat-form-field>

My options data are the following:

let shopsList= [
  {
    'edoId': '4010',
    'storeName': 'ABBEVILLE'
  }
  ,
  {
    'edoId': '3650',
    'storeName': 'AGEN'
  }
  ,
  {
    'edoId': '3298',
    'storeName': 'AIX ALLEES PROVENCALES'
  }
];

My purpose is to get the selected object data when an option is selected , and not just the value

for example when i select the first option , i wanna get this :

result = {
    'edoId': '4010',
    'storeName': 'ABBEVILLE'
}

And not only the value '4010'

As you can see i ve tried this : (onSelectionChange)="onEdoSelectionChanged(edo )

But this fires me always two events , for the old selected option and the new selected option ,

How may i only get the new selection data ??

Under my Angular 7 app , i'm using the mat-select ponent :

<mat-form-field  class="col-md-3" color="warn">
     <mat-select placeholder="Selectionner le code Edo"
                  id="codeEdo"
                  [(value)]="selectedCodeEdoValue"
                  ngDefaultControl
                  formControlName="codeEdo">
     <mat-option (onSelectionChange)="onEdoSelectionChanged(edo )"
                 *ngFor="let edo of shopsList"
                  [value]="edo.edoId">
                  {{edo.edoId}}
     </mat-option>
     </mat-select>
</mat-form-field>

My options data are the following:

let shopsList= [
  {
    'edoId': '4010',
    'storeName': 'ABBEVILLE'
  }
  ,
  {
    'edoId': '3650',
    'storeName': 'AGEN'
  }
  ,
  {
    'edoId': '3298',
    'storeName': 'AIX ALLEES PROVENCALES'
  }
];

My purpose is to get the selected object data when an option is selected , and not just the value

for example when i select the first option , i wanna get this :

result = {
    'edoId': '4010',
    'storeName': 'ABBEVILLE'
}

And not only the value '4010'

As you can see i ve tried this : (onSelectionChange)="onEdoSelectionChanged(edo )

But this fires me always two events , for the old selected option and the new selected option ,

How may i only get the new selection data ??

• javascript
• angular
• angular-material
• angular6
• angular-material2

1 Answer 1

I think your error is with this bit of code:

[value]="edo.edoId"

Try changing it to

[value]="edo"

This will return the full object, instead of just that specific field