How to get the value and the text in an Angular Material mat-select

Question

I need to get data of a mat-select specifically the text and its value. This is how I implemented the mat-select so far..

<mat-select
  placeholder="Transaction Type"
  (selectionChange)="selected($event)"
  formControlName="TransactionTypeID"
>
  <mat-option *ngFor="let t of transactionTypes" [value]="t.TransactionTypeID">
    {{ t.TransactionType }}
  </mat-option>
</mat-select>

This is how I get the value in the .ts file: this.formDetail.get('TransactionTypeID').value,

This is my attempt to get the text or 't.TransactionType':

selected(event: MatSelectChange) {
  console.log(event);
}

Can you please show me how to do this? Thank you.

Sivakumar Tadisetti · Accepted Answer · 2020-10-21T07:18:40.133

Update : 2020 (Updated answer as per the new version of angular material)

The below old answer worked for the OP at the time question was asked. But I observed comments on the old answer and output event, change of mat-select has been deprecated in the new version of angular material. So, the correct answer is

Working Stackblitz

HTML:

<mat-form-field>
  <mat-select (selectionChange)="selectedValue($event)">
    <mat-option [value]="'GB'">Great Britain</mat-option>
    <mat-option [value]="'US'">United States</mat-option>
    <mat-option [value]="'CA'">Canada</mat-option>
  </mat-select>
</mat-form-field>

selectionChange will give us an object contains 2 properties value & source

value will hold selected option value and
To get the selected option text, you can simply call triggerValue on source like below

TS:

selectedValue(event: MatSelectChange) {
  this.selectedData = {
    value: event.value,
    text: event.source.triggerValue
  };
  console.log(this.selectedData);
}

Old Answer

With normal change event, you can get the value like below

In the .html file

<mat-select placeholder="Transaction Type" (change)="selected($event)" formControlName="TransactionTypeID">
    <mat-option *ngFor="let t of transactionTypes" [value]="t.TransactionTypeID">
        {{t.TransactionType}}
    </mat-option>
</mat-select>

In the .ts file

selected(event) {
    let target = event.source.selected._element.nativeElement;
    let selectedData = {
      value: event.value,
      text: target.innerText.trim()
    };
    console.log(selectedData);
}

Glad to hear that ;-), but please don't forgot to approving the answer!!! — Sivakumar Tadisetti, Aug 30 '18 at 06:18
This is no good. Firstly, as of Material 7, the `change` event is now `selectionChange`. Secondly, you cannot access `_element`. @rodo's solution is the correct answer — andreisrob, Jul 12 '19 at 03:34
Hi @SivakumarTadisetti .. Is it possible to have 3 properties? I have to get 3 values (text, _id and um number) when user select a option. — Roberto Vieira, Jul 06 '21 at 03:17
@RobertoVieira can you provide the stackblitz with your problem? so will look into it — Sivakumar Tadisetti, Jul 06 '21 at 03:25

score 20 · Answer 2 · edited Jan 25 '20 at 19:00

20

To complete preceding answer one can use viewValue of MatOption. Also Angular 7 compiler wants to know if event.source.selected should be an array or a single object.

selected(event: MatSelectChange) {
  const selectedData = {
    text: (event.source.selected as MatOption).viewValue,
    value: event.source.value
  };
  console.log(selectedData);
}

edited Jan 25 '20 at 19:00

Derek Hill

5,965
5
55
74

answered Dec 03 '18 at 07:24

rodzmkii

1,357
1
10
7

score 5 · Answer 3 · answered Jan 21 '20 at 05:45

5

It can easily do with this code.

HTML

 <mat-select value="option1" (selectionChange)=changeRatio($event)>
                <mat-option value="option0">Free Selection</mat-option>
                <mat-option value="option1">1 : 1.5 (Recommended)</mat-option>
 </mat-select>

Angular TS

  changeRatio(event: MatSelectChange) {
    console.log(event.value);
  }

answered Jan 21 '20 at 05:45

nipun-kavishka

842
12
21

Surely this should be the best answer, maybe during 2018 it was harder to obtain the value with mat-option – artworkjpm Jun 02 '20 at 09:20

score 1 · Answer 4 · answered Jul 06 '20 at 08:53

1

onSeletected(e: MatSelectChange): void {
   setTimeout(() => {
     let control = this.getControl('documentInfo');
     control.setValue(e.source._elementRef.nativeElement.innerText);
  }, 500);    
}

I found solution for android 9, It worked for me. It would take time to change element after value change.

answered Jul 06 '20 at 08:53

Maulik Parmar

857
10
15

instead of using timeout u can calll this in "ngAfterViewInit" – Javed Nov 16 '20 at 15:13

score 0 · Answer 5 · answered Oct 22 '19 at 17:21

To get text and id of selected option:

In the .html file

<mat-select placeholder="Transaction Type" (change)="selected($event)" formControlName="TransactionTypeID">
    <mat-option *ngFor="let t of transactionTypes" [value]="t.TransactionType" [id]="t.TransactionTypeId">
        {{t.TransactionType}}
    </mat-option>
</mat-select>

In the .ts file

import { MatAutocompleteSelectedEvent } from '@angular/material';

.....

selected(event:MatAutocompleteSelectedEvent) {
    let id = event.option.id;;
    let value = event.option.value;
    console.log("id = "+ id + ", value: " + value);
}

How to get the value and the text in an Angular Material mat-select

5 Answers5

Working Stackblitz

Old Answer