Angular - mat-select inside mat-table - Show selected drop down value

Issue

Requirement: I want to get the selected value printed in browser console when I click on the Save icon on each row. Here is my example.

https://stackblitz.com/edit/angular-isif36-uokotq?file=app/select-value-binding-example.html

Problem 1: When I write [(ngModel)]="selectedDesc" , the dropdown does NOT display the pre-selected values

Problem 2: When I [(ngModel)]="selectedDesc" , and change the value on one row, it changes values in ALL rows.

Solution

The value="{{element.acc_desc}}" seems not to be required, because you use ngModel. Secondly, you need to bind to a property of the element in order to be able to select different account descriptions for each row. I am assuming you want to bind to element.acc_desc, so it should be [(ngModel)]="element.acc_desc" instead of selectedDesc.

Answered By - Octavian Mărculescu