Angular 7 and angular material how to get the selected option text of mat-select instead of its value
Sorry for being late to the party. I'm really horrified of reading all answers above...
The solution is much easier and direct than any of the proposed answers, as the select component just passes the selected model as part of the selectionChange
argument.
But first, some corrections to your example. You've declared an interface, so USE IT:
export interface FamilyRelation {
id: number;
type: string;
}
So, in your constructor:
constructor() {
this.familyRelationArray=[
{
id: 1,
type: 'Parent'
},
{
id: 2,
type: 'Sister'
}
]
}
and not what you put in your StackBlitz... Then your view will become this:
<mat-select (selectionChange)="onChange($event)" id="family_relation" placeholder="Family Relation">
<mat-option *ngFor="let familyRelation of familyRelationArray;" [value]="familyRelation.id">
{{familyRelation.type}}
</mat-option>
</mat-select>
No need for the (click) handler for every mat-option, since it isn't necessary and could lead to performance issues if you have a lot of options. Now, on the controller:
onChange(ev: any) {
let optionText = ev.source.selected.viewValue;
console.log(optionText);
}
or, if you prefer, the typed variant:
onChange(ev: MatSelectChange) {
let optionText = (ev.source.selected as MatOption).viewValue; //use .value if you want to get the key of Option
console.log(optionText);
}
but don't forget the imports...
import { MatSelectChange } from '@angular/material/select';
import { MatOption } from '@angular/material/core';
You can add index to loop with mat-option then pass it to onChange() method and it will allow you to get the selected element from array.
<mat-select #familyRelation (selectionChange)="onChange($event.value, element, i, 'hh')" id="family_relation" placeholder="Family Relation">
<mat-option *ngFor="let familyRelation of familyRelationArray; let i=index" [value]="i">
{{familyRelation.family_relation_type}}
</mat-option>
</mat-select>
onChange(index, data, i, type) {
console.log(this.familyRelationArray[index].family_relation_type);
}
Here you have update code: link
Updated the code, and added click
event on the options
https://stackblitz.com/edit/angular-material-w89kwc?embed=1&file=app/app.component.ts
Added one function
getInnerText(innerText){
console.log(innerText)
}
Added click event in view
<mat-option *ngFor="let familyRelation of familyRelationArray;" [value]="familyRelation.family_relation_id" (click)="getInnerText(familyRelation.family_relation_type)">
{{familyRelation.family_relation_type}}
</mat-option>