No way to get the selected item value out of dynamically created mat-select

What is the expected behavior?

Being able to get the selected value out of a dynamically created mat-select control with document.getNativeElement or any other way

What is the current behavior?

NativeElement created by mat-select does not hold the selected value

What are the steps to reproduce?

<mat-form-field>
<mat-select id={{column.columnName}} placeholder="{{column.columnName|translate|capitalize}}">
<mat-option *ngFor="let foreignRow of foreignDataMap[getForeignTableName(column.columnName)]" [value]="foreignRow.uid">
 {{foreignRow.value}}
</mat-option>
</mat-select>
</mat-form-field>

var element = document.getElementById( column.columnName ) as HTMLInputElement;

element.value <-- does not exist

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

All latest.

Is there anything else we should know?

No.

[agpreynolds]

I think you need to consider a different approach to the problem.

Option 1 - Change Events Every time a change happens, update a component variable to access later.

Option 2 - Reactive Forms Bind to the generated control name, then access this control when you need the value.

I’ve updated my stackblitz example with both of these options, i’ve kept the native control option there for reference.

https://stackblitz.com/edit/angular-material2-issue-1symtn

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}