Angular 7 And Angular Material How To Get The Selected Option Text Of Mat-select Instead Of Its Value

Answer :

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>